<script>
var obj=$('div');
obj.click(function(){
var cnt = 50;
var i=0;
var timer = setInterval(function(){
i++;
//debugger;
if(i>=cnt) {
clearInterval(timer);
}
console.log(i);
}, 10);
});
function play() {
clearInterval(timer);
var timer = setTimeout(function(){
obj.click();
play();
}, 5000);
}
play();
</script>
问题描述: 在body中只有一个div,绑定一个点击事件。点击事件是用来打印1-50,自动循环执行
当打开这个文件,打开控制台查看时,每隔5000ms正常输出1-50,。但是当我打开一个新的页面,在浏览这个页面时,之前测试页面的控制台中打印出错。
出错原因:一些新版本的浏览器的 setTimeout和setInterval的确做过优化。就是tab进入后台后,定时器会在一段时间后停止工作。其实这个机制对普通的定时动画效果的影响是极小的,因为tab激活后定时器还会再次激活。对于只是定时,而对时间敏感度不高的应用来说(动画,切换)等,中断再执行没有任何影响。
但是我上面这段代码的目的是为了定时触发click事件,所以tab切换也不能中断。暂时还没有好的解决方案。