js中setTimeout和setInterval性能详解总结

在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。也就是说setTimeout()只执行一次，setInterval()可以执行多次。两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数

setTimeout

描述

var timeoutID = window.setTimeout(code,millisec);

timeoutID：定时器ID号，它可以在clearTimeout()函数中被用来清除定时器。
code：一个被执行的代码串或函数
millisec：延迟的时间，单位毫秒。如果没有指定，默认为0

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

注：调用过程中，可以使用clearTimeout(id_of_settimeout)终止

window.setTimeout或setTimeout，两个写法基本一样，只不过window.setTimeout将setTimeout函数作为全局window对象的一个属性来引用

setTimeout(function timeout(){ 
    console.log(Math.floor(Math.random()*100 + 1)); 
},500)

window.setTimeout方法调用函数有两种方法：

function hello(){ 
    console.log("hello"); 
} 
window.setTimeout(hello,500);   //不可以有参数
window.setTimeout("hello()",500);   //可以有参数

无论window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数hello(_name)，它用于针对用户名显示欢迎信息： var userName="jack";

function hello(_name){  
    alert("hello,"+_name);   //根据用户名显示欢迎信息
 }

这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：

window.setTimeout(hello(userName),3000);

这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：

window.setTimeout("hello(userName)",3000);

如果在延时期限到达之前取消演示执行，可以使用window.clearTimeout(timeoutId)方法

function hello(){  
    alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){  
    window.clearTimeout(id);
}

这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消

除了前两个参数，setTimeout还允许添加更多的参数。它们将被传入推迟执行的函数

setTimeout(function(a,b){
  console.log(a+b);
},1000,1,2);  //3

上面代码中，setTimeout共有4个参数。最后两个参数，将在1000毫秒之后回调函数执行时，作为回调函数的参数。

IE 9.0以下版本，只允许setTimeout有两个参数。这时有三种解决方法，第一种是自定义setTimeout，使用apply方法将参数输入回调函数；第二种是在一个匿名函数里面，让回调函数带参数运行，再把匿名函数输入setTimeout；第三种使用bind方法，把多余的参数绑定在回调函数上面，生成一个新的函数输入setTimeout

除了参数问题，setTimeout还有一个需要注意的地方：被setTimeout推迟执行的回调函数是在全局环境执行，这有可能不同于函数定义时的上下文环境

var x = 1;
var o = {
    x: 2,
    y: function(){
    console.log(this.x);
  }
};
setTimeout(o.y,1000);  //1

上面代码输出的是1，而不是2，这表示回调函数的运行环境已经变成了全局环境

再看一个不容易发现错误的例子

function User(login) {
    this.login = login;
    this.sayHi = function() {
        console.log(this.login);
    }
}
var user = new User('John');
setTimeout(user.sayHi, 1000);  //undefined

上面代码只会显示undefined，因为等到user.sayHi执行时，它是在全局对象中执行，所以this.login取不到值。为了防止出现这个问题，一种解决方法是将user.sayHi放在函数中执行

setTimeout(function() {
  user.sayHi();
}, 1000);      //John

user.sayHi是在函数作用域内执行，而不是在全局作用域内执行，所以能够显示正确的值

另一种更通用的解决方法，则是采用闭包，将this与当前运行环境绑定

document.getElementById('click-ok').onclick = function() {
    var self = this;
    setTimeout(function() { 
        self.value='OK';
    }, 100);
}     //John

上面代码中，setTimeout指定的函数中的this，总是指向定义时所在的DOM节点

setInterval

setInterval函数的参数及用法和setTimeout函数一样，不同的是，setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

var tt = 10; 
function timego(){ 
    tt--; 
    console.log(tt); 
    if(tt==0){ 
        window.location.href='/'; 
        return false; 
    } 
};
window.setInterval("timego()",1000);

我们定义一个定时器timer，使用setInterval()每隔1秒调用一次timego()。这样timego会执行10次，每次数字tt会减1，直到为0。那么如果想停止定时器，可以使用以下代码：

与setTimeout一样，除了前两个参数，setInterval方法还可以接受更多的参数，它们会传入回调函数

function f(){
    for (var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}
setInterval(f, 1000, "Hello World");
// Hello World
// Hello World
// Hello World
// ...

setInterval指定的是，“开始执行”之间的间隔，因此实际上，两次执行之间的间隔会小于setInterval指定的时间。假定setInterval指定，每100毫秒执行一次，每次执行需要5毫秒，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始

var i = 1;
var timer = setInterval(function() { 
  alert(i++);
}, 2000);

上面代码每隔2000毫秒跳出一个alert对话框。如果用户一直不点击“确定”，整个浏览器就处于“堵塞”状态，后面的执行就一直无法触发，会累积起来。举例来说，第一次跳出alert对话框后，用户过了6000毫秒才点击“确定”，那么第二次、第三次、第四次执行将累积起来，它们之间不会再有等待间隔。

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。上面代码用setTimeout，可以改写如下

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee, 2000); //arguments的主要用途是保存函数参数，这个对象有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数
}, 2000);

clearTimeout(对象) 清除已设置的setTimeout对象;clearInterval(对象) 清除已设置的setInterval对象

window.clearInterval(timer);

其实setTimeout()也可以实现每隔一段时间重复执行某个函数，所以在js中setTimeout 和 setInterval 都经常被用来做网页上的定时器，允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行，我们就会给她指定一个很小的时间数，或者需要马上执行的话，我们甚至把这个毫秒数设置为0，但事实上，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动

setTimeout与setInterval基本原理详细分析

for(var i = 1; i <= 3; i++) {
    setTimeout(function(){
        console.log(i); // 4 4 4
    },100);
}

很多人会理所当然的认为for循环会分别打印出1,2,3. 但是事实不是这样的，会输出3次4. 要理解为什么会打印三次4，我们先来理解setTimeout这个函数吧，很多人会认为上面的setTimeout的意思是这样的:在100毫秒后执行setTimeout的回调函数，其实这样的理解是有误的，其实setTimeout与setInterval真正的含义如下：

setTimeout：在指定的毫秒数后，将定时任务处理的函数添加到执行队列的队尾

setInterval：按照指定的周期(以毫秒数计时)，将定时任务处理函数添加到执行队列的队尾

setTimeout与setInterval都是异步的，所以我们现在可以来理解下上面循环为什么一直都是4呢？其实调用setTimeout时候，会有一个延时事件排入队列，然后setTimeout调用之后的那行代码运行，接着是再下一行代码，直到再也没有任何代码了，javascript虚拟机才会问，队列里还有吗？如果队列中至少有一个事件适合于触发，比如上面的setTimeout函数，则会调用setTimeout那个函数。所以上面的代码先for循环，循环结束，而 i === 4一直递增，直到不再满足i<=3为止。所以就打印了3个4

setTimeout(function(){
    console.log("打印我，我是异步执行的");
},100);
console.log("我是新来的，我要先执行");

运行结果是：先打印出 “我是新来的，我先执行”这句代码，接着打印”打印我，我是异步执行的”代码

setTimeout(f,0)

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f,0)，那么会立刻执行吗？

答案是不会。因为上一段说过，必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。也就是说，setTimeout的真正作用是，在“任务队列”的现有事件的后面再添加一个事件，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行

setTimeout(f,0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“任务队列”中已有的事件）一结束就立刻执行。也就是说，setTimeout(f,0)的作用是，尽可能早地执行指定的任务

setTimeout(function() { 
  console.log("Timeout");
}, 0);
function a(x) { 
    console.log("a() 开始运行");
    b(x);
    console.log("a() 结束运行");
}
function b(y) { 
    console.log("b() 开始运行");
    console.log("传入的值为" + y);
    console.log("b() 结束运行");
}
console.log("当前任务开始");
a(42);
console.log("当前任务结束");
// 当前任务开始
// a() 开始运行
// b() 开始运行
// 传入的值为42
// b() 结束运行
// a() 结束运行
// 当前任务结束
// Timeout

上面代码说明，setTimeout(f,0)必须要等到当前脚本的所有同步任务结束后才会执行。

0毫秒实际上达不到的。根据HTML 5标准，setTimeOut推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。另一方面，浏览器内部使用32位带符号的整数，来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒（24.8天），超过这个时间会发生溢出，导致回调函数将在当前任务队列结束后立即执行，即等同于setTimeout(f,0)的效果

应用

可以调整事件的发生顺序

比如，网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，我们先让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)

var input = document.getElementsByTagName('input[type=button]')[0];
input.onclick = function A() {
  setTimeout(function B() {
    input.value +=' input'; 
  }, 0)
};
document.body.onclick = function C() {
  input.value += ' body'
};

面代码在点击按钮后，先触发回调函数A，然后触发函数C。在函数A中，setTimeout将函数B推迟到下一轮Loop执行，这样就起到了，先触发父元素的回调函数C的目的了

文本框问题

用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的的

document.getElementById('input-box').onkeypress = function(event) {
  this.value = this.value.toUpperCase();
}

上面代码想在用户输入文本后，立即将字符转为大写。但是实际上，它只能将上一个字符转为大写，因为浏览器此时还没接收到文本，所以this.value取不到最新输入的那个字符。只有用setTimeout改写，上面的代码才能发挥作用

document.getElementById('my-ok').onkeypress = function() {
  var self = this;
  setTimeout(function() {
    self.value = self.value.toUpperCase();
  }, 0);
}

上面代码将代码放入setTimeout之中，就能使得它在浏览器接收到文本之后触发

计算量大、耗时长的任务

由于setTimeout(f,0)实际上意味着，将任务放到浏览器最早可得的空闲时段执行，所以那些计算量大、耗时长的任务，常常会被放到几个小部分，分别放到setTimeout(f,0)里面执行

var div = document.getElementsByTagName('div')[0];

// 写法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
  div.style.backgroundColor = '#'+i.toString(16);
}
// 写法二
var timer;
var i=0x100000;
function func() {
  timer = setTimeout(func, 0);
  div.style.backgroundColor = '#'+i.toString(16);
  if (i++ == 0xFFFFFF) clearInterval(timer);
}
timer = setTimeout(func, 0);

上面代码有两种写法，都是改变一个网页元素的背景色。写法一会造成浏览器“堵塞”，而写法二就能就不会，这就是setTimeout(f,0)的好处

另一个使用这种技巧的例子是，代码高亮的处理。如果代码块很大，就会分成一个个小块，写成诸如setTimeout(highlightNext, 50)的样子，进行分块处理