javascript的setTimeout以及setInterval休眠问题。
前端码农们在做项目中时候,必定不可少的需要做到轮播效果。但是有些特殊的需求,比如:
需要做到第一个容器内容轮播滚动之后,第二个容器内部再轮播滚动,再第三个容器内容轮播滚动。
这时候我的一开始的思路是:每个容器都看成一个单独的轮播效果,既然是依次的滚动就设定滚动开始时间差,三个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是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的操作放在队列中 ,等到下次窗口一打开的一瞬间把队列里面的全部执行,由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果,
假设现在你轮播的是第四张大图,下次打开时候播放的可能是任意的。
再分析上面的程序:
我们让程序分别过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()
这样就完美解决了这个问题。
我猜想可能由于浏览器的特殊性,它的资源有限。所以采用这个策略,也是可以理解的。
javascript的setTimeout以及setInterval休眠问题。的更多相关文章
- Javascript的setTimeOut()和setInterval()的定时器用法
Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...
- JavaScript的setTimeout和setInterval的深入理解
发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...
- Javascript中setTimeout和setInterval的区别和使用
在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...
- JavaScript的setTimeout()和setInterval()
1. setTimeout()方法 作用:在制定的毫秒数后调用函数或计算表达式 语法: setTimeout(code,millisec) 实例: function timedMsg() { var ...
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
- JavaScript中setTimeout()和setInterval()的区别
含义: setTimeout()和setInterval()经常被用来处理延时和定时任务.使用setTimeout()处理延时任务,而使用setInterval()方法处理定时任务: setTimeo ...
- JavaScript———从setTimeout与setInterval到AJAX异步
setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },1 ...
- javascript使用setTimeout、setInterval时找不到变量的问题
我们在某个作用域内或者在自己定义的一个类里调用setTimeout.setInterval会经常会遇到找不到某个变量的错误. 比如下面这个例子: window.onload = function(){ ...
- javascript定时器:setTimeout与setInterval
概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...
随机推荐
- Android广播接收者应用(电话拦截器)
一.电话拦截器应用说明 在我们输入完电话号码并拨打电话时,系统会发出一个有序广播(action="android.intent.action.NEW_OUTGOING_CALL") ...
- iOS10全新推送功能的实现
从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...
- objc_msgSend消息传递学习笔记 – 消息转发
该文是 objc_msgSend消息传递学习笔记 – 对象方法消息传递流程 的基础上继续探究源码,请先阅读上文. 消息转发机制(message forwarding) Objective-C 在调用对 ...
- eclipse插件svn 提交时报:"svn is already locked"解决方法
在出错文件夹下,鼠标右键TortoiseSVN->Clean up. SVN错误:Attempted to lock an already-locked dir 1.出现这个问题后使用“清理”功 ...
- HDU 1043 Eight (A* + HASH + 康托展开)
Eight Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- [改善Java代码]养成良好习惯,显式声明UID
建议11: 养成良好习惯,显式声明UID 我们编写一个实现了Serializable接口(序列化标志接口)的类, Eclipse马上就会给一个黄色警告:需要增加一个Serial Version ID. ...
- 用java调用oracle存储过程总结(转)
//1.call+包名+存储过程名(传入.传出值用?) String str="{call SMSBUSINESS.deleteZhZMember(?,?,?)}"; //2.建立 ...
- 为什么Java byte 类型的取值范围是-128~127 (转)
概念:负数的补码是该 数 绝 对 值 的 原 码 按 位 取 反 ,然 后 对 整个数 加 1 步骤: 1.确定byte是1个字节,也就是8位 2.最大的应该是0111 1111,因为第一位是符号位, ...
- ActiveMQ(5.10.0) - Destination-level authorization
To build upon authentication, consider a use case requiring more fine-grained control over clients t ...
- centos6.5下逻辑卷操作
1.将两块独立磁盘分别分区 2.创建物理卷-pvcreate 3.创建卷组 4.创建逻辑卷 5.格式化逻辑卷 6.扩展逻辑卷 7.缩小逻辑卷