setInterval(fn,delay)的工作原理以及小特点

一.浏览器执行事件特点

1.Js引擎只有一个线程,迫使异步事件只能加入到队列去等待执行.

2.在异步执行时,setTimeout与setInterval有着本质上的区别.

3.如果定时器被正在执行的代码阻塞了,它将会进入队列的尾部去等待执行下一次可能执行的时间出现,有可能超过它设定的延迟时间.

4.如果setInterval类的间隔定时器回调函数执行时间很长,长于时间间隔,定时器就有可能无间隔的输出.

Js每一块的执行都会阻塞其他异步事件,这就意味着一个异步事件产生会被加入到一个队列中去等待.

下图中,第一块js代码编译完毕后,

浏览器发现有setInterval事件和点击事件还有setTimeout事件.

左侧0-50是时间间隔,中间是浏览器的执行顺序,右侧是各类事件的触发状态.此图中setInterval和setTimeout都是10ms的定时器.

js的读取完约用掉了18ms,此时初始化了两个定时器,setTimeout和setInterval,当setTimeout被触发时,js代码还没有执行完毕,所以它被留在了队列中.

//注意,图中start的含义是编译; fire才是触发

另外,在js执行时,有点击事件被触发,但js还没执行完毕,所以它也被列入了队列中.

当js代码块执行完毕以后,浏览器会按照等待顺序来执行函数,所以要执行点击事件.

在点击事件执行过程中.又有setInterval事件被触发(fire),此时正在执行点击事件,所以被列入队列.

当点击事件执行完毕后,浏览器又查找队列,继续按队列中顺序执行setTimeout.

在执行setTimeout时,setInterval再次被触发,继续被列入队列.

此时队列中有两个setInterval的回调函数等待执行,setInterval的等待均已超过10ms,所以两个回调函数会无间隔的执行两次.

在50ms时,第三个setInterval回调函数才被执行.

再例:

    var Flag=true;
    $('#demo').click(function () {
        if(Flag){
            var i=0;
            var maxi=5;
            var sh=setInterval(function(){
                i++;
                if(i>=maxi){
                    clearInterval(sh);
                    Flag=true;
                }
                console.log(Flag)
            },1000);
            console.log(Flag)
        }
    Flag = false;

    });

//输出结果为: true false*4 true;

二.setInterval休眠问题

1.这个问题是在编辑轮播的时候发现的,我用setInterval写的定时执行的轮播,类似setInterval(function,1000);每秒轮播一次;

结果我在把窗口最小化一段时间后,再次打开浏览器,轮播就会变的杂乱无章,有可能是休眠问题导致.

当我们把浏览器最小化显示时,setInterval会暂时进入休眠状态,但并不是不执行程序,它会把setInterval的回调函数放在队列中,等浏览器窗口再次打开时,一瞬间全部执行.

对于这个现象我们可以调用监听浏览器最小化的事件,当浏览器最小化的时候,clearInterval,打开窗口时再setInterval.//只是一种解决方法.

于此,每个浏览器监听事件不一样,下面归纳了几种://参阅http://html5test.com/

//IE浏览器
if(document.addEventListener){
document.addEventListener('msvisibilitychange',function(){
console.log(document.msVisibilityState);
});
//火狐浏览器
if(document.addEventListener){
document.addEventListener('mozvisibilitychange',function(){
console.log(document.mozVisibilityState);
});
//chrome谷歌浏览器
if(document.addEventListener){
document.addEventListener('webkitvisibilitychange',function(){
console.log(document.webkitVisibilityState);
});
}