javascript的setTimeout和setInterval休眠问题

javascript的setTimeout和setInterval休眠问题2014-09-19 cnblogs heimanba前端码农们在做项目中时候，必定不可少的需要做到轮播效果。但是有些特殊的需求，比如：

需要做到第一个容器内容轮播滚动之后，第二个容器内部再轮播滚动，再第三个容器内容轮播滚动。

这时候我的一开始的思路是：每个容器都看成一个单独的轮播效果，既然是依次的滚动就设定滚动开始时间差,三个setTimeout（）分别延迟差。

HTML 代码：

<div id="warp"><div class="items"><ul class="island s1"><li>111</li><li>222</li><li>333</li></ul></div><div class="items"><ul class="island s2"><li>444</li><li>555</li><li>666</li></ul></div><div class="items"><ul class="island s3"><li>777</li><li>888</li><li>999</li><li>000</li></ul></div> </div>

CSS 代码：

.items{height: 18px;overflow: hidden;margin-bottom: 10px;border-bottom: 1px dashed #999;}

JAVASCRIPT 代码：（基于jquery的实现）

var uls = $（"#warp"）.find（".island"）,lh = uls.find（"li"）.height（）,size= uls.size（）,Global=[];//全局变量uls.each（function（i,el）{$（el）.find（"li"）.first（）.clone（true）.appendTo（$（el））;}）;/*动画效果*/function animates（i）{ Global[i]==undefined&&（Global[i]=0）;Global[i]++;_els =uls.eq（i）;var len = _els.find（"li"）.length;_els.animate（{"marginTop":-Global[i]*lh+"px"},600,function（）{if（Global[i] == len-1）{Global[i]=0;_els.css（{"margin-top":"0px"}）;}}）; };function interval（i）{setInterval（function（）{animates（i）},5000）;};for（var x=0;x<size;x++）{（function（x）{setTimeout（function（）{interval（x）;},650+x*650）;}）（x）};

一开始的时候我发现都是OK的，但是当我切换到别的页面，或者暂时最小化的时候，轮播就变得杂乱无章。这个问题困扰我很久,到公司请教

大牛同事，他说可能是 setInterval休眠问题导致。

经过仔细的查阅资料以及实践，发现当页面最小化时候或者切换网页浏览其他网页等情况时， setInterval是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的操作放在队列中，等到下次窗口一打开的一瞬间把队列里面的全部执行，由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果，

假设现在你轮播的是第四张大图，下次打开时候播放的可能是任意的。