setTimeout与setInterval

JavaScript

一. setTimeout

1. 定义

setTimeout(func,[delay,param1,param2,····]);
setTimeout(code,[delay]);

参数说明：
a. 对于第一行代码：
func指的是延迟后想执行的函数，delay为延迟秒速，为毫秒，param是func的参数，但是这种赋予参数的方法在IE9以下（含IE9）不兼容，可以使用polyfill进行兼容性处理。
b. 对于第二行代码：
code指的是可执行代码，例如

setTimeout(alert("HeiHei"),200)

但是这种方法不推荐，类似eval(),可以包含可执行代码，含有安全隐患。

2. 事件添加的说明

定时器对队列的工作方式：当特定时间过去后将代码添加到队列中，但并不意味着会马上将执行，设定一个200ms后执行的定时器，指的是在200ms后它将被添加到队列中，是否执行，还得看队列中是否没有其他的东西。看一下例子：

var a=document.getElementById("nav");
a.onclick=function(){
setTimeout(alertsomething,200);
//一些其他的代码
}
function alertsomething(){
alert("it is working");
}

假定onclick时间处理程序需要执行300ms，这时虽然在200ms添加了定时器代码，但是仍旧需要等待onclick事件完成后才能够执行。如图所示，本来在205ms处添加了定时器代码，但是由于此时onclick事件还没结束，故要等到300ms后才执行定时器代码

备注：由于浏览器精度的原因，delay的值最终大于等于4。下面是w3c中的原文：

If the currently running task is a task that was created by the setTimeout() method, and timeout is less than 4, then increase timeout to 4.

二、setInterval

1.定义

跟setTimeout类似

setInterval(func, delay[,param1, param2, ...]);
setInterval(code, delay);

为了避免多个定时器代码不间断连续运行好几次，当使用setInterval(),仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。

2.缺点

a. 某些间隔会被跳过
b. 多个定时器的代码执行之间的间隔可能会比预期小。

3.解决方法

a. 链式调用

setTimeout(function(){
//处理
setTimeout(arguments.callee,interval)
},intercal);

三、两者之间的区别

setTimeout方法，在一个指定的时间间隔后运行代码。
setInterval方法， 每隔一个固定的时间间隔后持续运行指定代码。

四、参考资料

1. MDN WindowTimers.setTimeout()
2. W3C Times