javascript定时器详解

原文地址：http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html

一、setTimeout

 setTimeout(function(){

    //要执行的代码                     

},200);

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

二、setInterval

 setInterval(function(){

    //要执行的代码                     

},200);

A、理解：

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

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

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

B、问题：

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

前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔

C、解决方法：

使用链式setTimeout,如：

 setTimeout(function(){

    //要执行的代码

    setTimeout(arguments.callee,200);

},200);

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

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

D、实际应用：

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

2、理解函数节流

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

看下面代码：

 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后代码添加到队列中执行,

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

 
摘自  华子yjh