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

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

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

上面代码中，setTimeout的第一个参数f，是一个函数名，表示将在1000毫秒后调用。

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.y在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对象。

setInterval的用法与setTimeout完全一致，区别在于setInterval指定某个任务每隔一段时间就执行一次，甚至是无限次的定时执行。

var timer = setInterval(function() {
    console.log(1);
}, 1000)

上面代码中，每隔1000毫秒就会调用一次匿名函数，输出一个1，无限运行下去，直到程序关闭。

setTimeout和setInterval返回的整数值，表示计数器编号，这个编号传入clearTimeout和 clearInterval函数，就可以取消对应的定时器。

var timer1 = setTimeout(f1, 1000);
clearTimeout(timer1);

var timer2 = setInterval(f2, 1000);
clearInterval(timer2);

上面代码中，f1和f2都不会被执行，因为立即就被取消了。

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