JavaScript定时器

2012 - 5 - 30 作者 : Jimco 分类 : JavaScript

1setTimeout 

setTimeout(function(){
    //要执行的代码                     
},200);

       理解:指隔200ms,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行

 

2setInterval

setInterval(function(){
    //要执行的代码                     
},200);

1)理解:

       ①上面代码是指每隔200ms就创建一个执行代码的定时器

       ②当使用setInterval,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句

       即:当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中


2)问题:

       当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔


3)解决方法:

       使用链式setTimeout,如:

setTimeout(function(){
    //要执行的代码
    setTimeout(arguments.callee,200);
},200);

       这样做的好处是:前一个定时器要执行的代码执行完且等待200ms,才创建一个新的定时器,并把定时器代码添加到队列中执行

       即:不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)


4)实际应用:

       ①javascript脚本会阻塞浏览器处理其他事件,如与用户的交互,如果一段js脚本运行的时间过长,那么我们可以使用js定时器,腾出空闲,避免用户等过长时间

       ②理解函数节流

       函数节流:指某些代码不可以在没有间断的情况下连续执行

       看下面代码:

window.onresize = function(){
    console.log(document.documentElement.clientHeight);
}
//在resize事件处理程序结束之前,一直输出着浏览器视口高度

       当你在调整浏览器窗口大小时,resize事件处理程序中代码就一直在运行着

 

       改进代码:

var timeoutId = null;
window.onresize = function(){
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function(){
        console.log(document.documentElement.clientHeight);                                 
    },100);
}

       封装以后的改进代码:

function cHeight(){
    console.log(document.documentElement.clientHeight);
}
function throttle(method,context){
    clearTimeout(method.tId);
    method.tId = setTimeout(function(){
        method.call(context);                                
    },100);
}
window.onresize = function(){
    throttle(cHeight);  
}
 
//在resize事件处理程序结束后,等待100ms后代码添加到队列中执行

       只输出最后一个定时器代码结果,浏览器不会在极短的时间内进行过多的计算

 

上一篇:meta 之 viewport 下一篇:

3843 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈