JQuery setInterval() 方法 重复调用时 会出现问题 越来越快 清除也没用 80
问题:当一个页面同时有两个setInterval函数调用的冲突如何解决?
解决方法:
1.定义两个变量 并把 setInterval 赋值给变量
var a = setInterval(function(){ ------ code ------},1000)
var b = setInterval(function(){ ------ code ------},1000)
2.清除
clearInterval(a)
clearInterval(b)
--------------------------------------------------------------------------
举例:
注:
setInterval()方法会不停地调用函数,直到用clearInterval()终止定时或窗口被关闭。
window.clearInterval()
功能:取消由setInterval()方法设置的定时器。
建议在 setInterval 代码的前面先清除一次。
建议直接在 ppt 方法的前面加上:
clearInterval(set); 即
function ppt(){
clearInterval(set);
......
}
这样不管你哪一次设置 setInterval 都会先清除一下。
问题的原因嘛,可能是因为 window.resize 事件的特殊性。
其他事件只触发一次,像键盘 keydown mousedown 之类的,只要按键或鼠标不抬起隔段时间就触发一次。而 window.resize ,会在改变的过程中,连续触发多次。
在多次的触发中,你的 setTimeout(clear,1) 马上就执行了,setTimeout(set,20) 要 20 毫秒后才进行,在这间隔的19毫秒中,又触发了多少次 resize 事件不得而知,效果就是:多次注册了 setInterval,同时多次进行了无效的 clearInterval (因为清除发生在注册前,1毫秒后就执行了)。。。。。。。有点墨迹了。。。。。
推荐于2016-06-24
重复调用是因为重复注册了setInterval,比如在某个事件的相应函数中创建setInterval,再次触发该事件的时候又注册了 setInterval。
本质上来说还是属于函数节流相关的问题.出现这种情况多半是重复注册了setInterval(),然后清除时只清除了一个,比如:
var ms = setInterval(function(){},3000);
$('body').hover(function(){
clearInterval(ms);
},function(){
var ms= setInterval(function(){}, 3000);
})
解决方法:
将ms定义为全局变量,不适用var去定义,那么不管函数触发多少次注册,值始终都是一个,那么清除的时候自然就会清除掉对应的setInterval().
通过函数节流的方式为注册setInterval()时加上一个开关来控制一段时间内只执行一次注册.