setTimeout 深度剖析

• 如何使用 setTimeout

setTimeout() 基础

===============

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay)

上面代码中，setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。

console.log(1);

setTimeout(‘console.log(2)’,1000);

console.log(3);

上面代码的输出结果就是1，3，2，因为 setTimeout 指定第二行语句推迟 1000 毫秒再执行(如果这在 Sublime 下运用插件以 nodejs 环境来执行，许解释器不同，会报错)。

需要注意的是，推迟执行的代码必须以字符串的形式，放入 setTimeout，因为引擎内部使用 eval 函数，将字符串转为代码。如果推迟执行的是函数，则可以直接将函数名，放入 setTimeout。一方面 eval 函数有安全顾虑，另一方面为了便于 JavaScript 引擎优化代码，setTimeout 方法一般总是采用函数名的形式，就像下面这样。

function func(){

console.log(2);

}

setTimeout(func,1000);

// 或者

setTimeout(function (){console.log(2)},1000);

setTimeout 传参数

---

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

setTimeout(function(a,b){

console.log(a+b);

},1000,1,1);

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

IE 9.0 及以下版本，只允许 setTimeout 有两个参数，不支持更多的参数；可以在匿名函数中，让回调函数带参数运行，再把匿名函数输入 setTimeout；例如:

setTimeout(function() {

myFunc(“one”, “two”, “three”);

}, 1000);

当然也可以使用 bind 或 apply 方法来解决。

例如使用 bind 方法，把多余的参数绑定在回调函数上面，生成一个新的函数输入 setTimeout。

setTimeout( function(arg1){}.bind(undefined, 10), 1000 );

上面代码中，bind 方法第一个参数是 undefined，表示将原函数的 this 绑定全局作用域，第二个参数是要传入原函数的参数。它运行后会返回一个新函数，该函数不带参数。

setTimeout 注意点

---

setTimeout() 中回调函数中的 this

如果被 setTimeout 推迟执行的回调函数是某个对象的方法，那么该方法中的 this 关键字将指向全局环境，而不是定义时所在的那个对象。

var x = 1;

var o = {

x: 2,

y: function(){

console.log(this.x);

}

};

setTimeout(o.y,1000);// 1

上面代码输出的是 1，而不是 2，这表示 o.y 的 this 所指向的已经不是 o，而是全局环境了。

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

function User(login) {

<