技术解析

已经使用 clearInterval() ,为什么还是无法清除定时器?
0
2021-09-01 03:08:56
idczone
代码及运行效果均可在 jsbin 中查看:
https://jsbin.com/waduqigayo/1/edit?html,css,js,console,output

mouseover 调用了几次?

在 timer = setInterval(function(){...}) 这里, 如果不加 var, 则 timer 是一个成员变量, 只在当前的匿名函数中有效。
解决方法是更改为 var timer = setInterval(function(){...}) 。

嘻嘻,没用过 js,感觉 clearInterval 的逻辑应该在 setInterval 的匿名函数外面

原因是 mouseover 被重复调用了,验证方法是你换一个事件,或者在"调用 mouseover"处增加一个断点。

不用的,setInterval 返回一个 timeout ID,clearInterval 清除之,没问题

mouseover 本来应该只触发一次,但是我认为在你的这个 case 里因为 content 元素一直在动,所以重复触发了,建议换一个事件来触发这个逻辑。

应该不是事件被重复调用的问题, 代码里面 timer 被定义成了成员变量, 在 setInterval function 里面是没用的..?

timer 在最顶层声明了啊
我来说吧
这里楼主明显是调用了两次 mouseover
但是 timer 变量两次都是同一个
意思就是第一次 mouseover 中的 setInterval 返回的 timeoutId 被第二次覆盖了,所以清除定时器的时候只清除了第二个定时器

每次调用 mouseover 时都会生成新的定时器并赋值给 timer。旧的定时器失去了变量引用,不会被清除,但是仍然有效,会一直执行下去。

是的, 我没看到...

mouserover 被重复调用,也就是说明启动了两个定时器。但是当 content.offsetLeft == 0 的时候,都会调用 clearInterval()方法来清除掉定时器啊。所以不是只会输出两个"A"吗 ? 但运行结果是:偶尔只输出两个"A", 但大部分时候会输出非常多的“ A ”

thanks

不加是全局变量,加了是作用域变量。你说的成员变量 js 并没有,要实现也是用 this 实现的。

https://s3-us-west-1.amazonaws.com/zzjas/public/Image_mcwuFHisMj.png
Fix: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Example_2_Alternating_two_colors

问题在 timer 不该在 global scope,正解。https://s3-us-west-1.amazonaws.com/zzjas/public/Image_KjHJM7ZKap.png 这样就完了

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服