JavaScript教程笔记(16)-定时器

JavaScript中定时执行代码的功能，叫做定时器（timer），主要由setTimeout和setInterval两个函数完成。

1 setTimeout()

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

var timerId = setTimeout(func|code, delay);

上面代码中，setTimeout接受两个参数。第一个参数func|code是函数名或一段代码，第二个参数delay代表在多少毫秒后执行。

console.log(1);
setTimeout('console.log(2)', 1000);
console.log(3);
// 1
// 3
// 2

上面代码中，第一个参数是一段代码，注意：console.log(2)必须是字符串的形式。结果是先输出1和3，然后等待1000毫秒输出2。

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

上面代码中，setTimeout的第一个参数直接是一个函数名。

setTimeout的第二个参数默认为0，可以省略。

setTimeout(f);
// 等同于
setTimeout(f, 0);

setTimeout还允许更多的参数，将被依次传入推迟执行的函数。

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

注意，如果setTimeout的回调函数是对象的方法，那么方法内部的this关键字指向全局环境，而不是方法所在的对象。

var x = 1;

var obj = {
    x: 2,
    y: function() {
        console.log(this.x);
    }
};

setTimeout(obj.y, 1000) // 1

上面代码输出的是1，而不是2。原因是当obj在1000毫秒后运行时，this所指向的不是obj，而是全局环境。

为防止出现这种问题，一种方法是将obj.y放入一个函数。

var x = 1;

var obj = {
    x: 2,
    y: function() {
        console.log(this.x);
    }
};

setTimeout(function() {
    obj.y();
, 1000); 
// 2

上面代码中，obj.y放在一个匿名函数中运行，使得obj.y在obj的作用域内执行，而不是全局环境，所以显示正确的值2。

另一种方法是使用bind。

var x = 1;

var obj = {
    x: 2,
    y: function() {
        console.log(this.x);
    }
};

setTimeout(obj.y.bind(obj), 1000); 
// 2

上面代码中，将obj.y这个方法绑定在obj对象。

注：本文适用于ES5规范，原始内容来自 JavaScript 教程，有修改。