DOM中定时器走马灯切换时遇到问题

宋天琪

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>123456789</title>
<!-- <script type="text/javascript">
function scroll(){
var title=document.title;
var firstCh=title.charAt(0);
var leftStr=title.substring(1,title.length);
document.title=leftStr+firstCh;
}
setInterval("scroll()",500)
</script>-->
<script type="text/javascript">
// 有问题在运行时点击切换时出现问题！！！切换后依旧滚动但不是按预期的滚动
var m;
var n;
function left(){
var title=document.title;
var firstCh=title.charAt(0);
var leftStr=title.substring(1,title.length);
document.title=leftStr+firstCh;
}
function right(){
var title=document.title;
var rightCh=title.charAt(title.length-1);
var leftStr=title.substring(0,title.length-1);
document.title=rightCh+leftStr;
}
function leftScroll(){
clearInterval(n);
var m=setInterval("left()",500);
}
function rightScroll(){
clearInterval(m);
var n= setInterval("right()",500);
}
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="leftScroll()" />
<input type="button" value="向右滚动" onclick="rightScroll()" />
</body>
</html>

复制代码

高宜 · 高宜

张恒维发表于 2012-6-17 01:23
从代码上看，其实第一点已经做到了。在每次点击向一个方向滚动的时候都会清除另一个方向的滚动。只不过考 ...

讲解的透彻，十分感谢！，原来没有定义定时器之前清理定时器也不报错的。

张恒维 · 张恒维

1，假如向右滚动，你切换到向左滚动效果是出不来的首先你得清除他向右滚动
2，滚动的时间会叠加，在同一个方向上连续点上去你看到的效果是越来越快。。。但是真正的不是时间叠加，而是每次的滚动都是独立的例如：用5秒做一周期吧你上面500毫秒太快了。第一点击是5秒后，第二次点击不会在5/2而是移动后的一秒后点击，那出现的是两次移动出现的间隔是一秒。。。依次类推~~~~
3，你做定时器滚动时记得做清除。。。你没有做清除所以看不出效果

从代码上看，其实第一点已经做到了。在每次点击向一个方向滚动的时候都会清除另一个方向的滚动。只不过考虑的不周全，从而出现了问题。
其错误有两个地方：第一、非常明显的错误。就是在函数内重复申明了m和n两个变量。而在调用clearInterval()函数时传递的参数却是最上面申明的全局变量m和n，所以不可能清除得了。第二、也就是考虑不到位。我们知道每点击一次滚动的时候都会产生一个ID并赋给变量m或n，但是重复点击一个按钮时，那么当前产生的ID将会覆盖掉前一个ID而赋值给变量，这就造成了清除的只会是最后一次点击时产生的ID，而之前的却因为ID被覆盖而无法清除。因此，在清除另一方向滚动的同时应该还要清除一次己方的滚动。代码如下：

function leftScroll(){
stopScroll();
m=setInterval("left()",500);
}
function rightScroll(){
stopScroll();
n= setInterval("right()",500);
}
function stopScroll(){
clearInterval(n);
clearInterval(m);
}

复制代码

这样即使多次重复的点击一个按钮也不会造成时间叠加的问题了。

黑马-杨鹏立 · 黑马-杨鹏立

看了下，你想表达的咋切换的时候他会出的问题有几种。。。。
1，假如向右滚动，你切换到向左滚动效果是出不来的首先你得清除他向右滚动
2，滚动的时间会叠加，在同一个方向上连续点上去你看到的效果是越来越快。。。但是真正的不是时间叠加，而是每次的滚动都是独立的例如：用5秒做一周期吧你上面500毫秒太快了。第一点击是5秒后，第二次点击不会在5/2而是移动后的一秒后点击，那出现的是两次移动出现的间隔是一秒。。。依次类推~~~~
3，你做定时器滚动时记得做清除。。。你没有做清除所以看不出效果

帐号		自动登录	找回密码
密码			加入黑马

DOM中定时器走马灯切换时遇到问题

评分

3 个回复

评分

评分