脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript的setTimeout以及setInterval休眠问题。，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 需要做到第一个容器内容轮播滚动之后，第二个容器内部再轮播滚动，再第三个容器内容轮播滚动。
这时候我的一开始的思路是：每个容器都看成一个单独的轮播效果，既然是依次的滚动就设定滚动开始时间差,三个setTimeout()分别延迟差。
HTML 代码：
复制代码
<p id="warp">
<p class="ITems">
<ul class="island s1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</p>
<p class="items">
<ul class="island s2">
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</p>
<p class="items">
<ul class="island s3">
<li>777</li>
<li>888</li>
<li>999</li>
<li>000</li>
</ul>
</p>
</p>
复制代码
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是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的操作放在队列中 ，等到下次窗口一打开的一瞬间把队列里面的全部执行，由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果，
假设现在你轮播的是第四张大图，下次打开时候播放的可能是任意的。
再分析上面的程序：
我们让程序分别过650ms, 1300ms,1950ms执行如果窗口一直是这个是本窗口，也就是没有进行休眠。程序可以照常执行。
如果窗口最小化，程序进入休眠，会把队列中的操作在很快时间内一起执行，所以程序一下子就乱啦。
那如何解决这个问题呢?还是想了啦jquery的animate，如果在动画animate的回调中进行递归，进入下次的轮播。那不就完美解决！！
让我们来看程序：
JAVASCRIPT代码：
复制代码
var uls = $("#warp").find(".island"),
lh = uls.find('li').height(),
size = uls.size(),
i = 0;
uls.each(function(i,el){
$(el).find('li').first().clone(true).appendTo($(el));
});
function animates(i){
var ul = $('.items').eq(i).find('ul');
if(!ul){return false;}
var count = parseInt(ul.attr("count-role")||0);
count++;
var len = ul.find('li').length;
ul.animate({"marginTop":-count*lh+"px"},600,function(){
if(count == len-1){
count=0;
ul.css({"margin-top":"0px"});
}
ul.attr("count-role",count);
animates(++i);
});
};
function interval(){
setInterval(function(){
animates(i)
},5000);
};
interval()
复制代码
这样就完美解决了这个问题。
我猜想可能由于浏览器的特殊性，它的资源有限。所以采用这个策略，也是可以理解的。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript的setTimeout以及setInterval休眠问题。全部内容，希望文章能够帮你解决javascript代码实例教程-javascript的setTimeout以及setInterval休眠问题。所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。