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

﹏ヽ暗。殇╰゛Y 2022-03-31 09:40 233阅读 0赞

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对象。

## 2 setInterval() ##

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

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

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

## 3 clearTimeout(), clearInterval() ##

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

var timer1 = setTimeout(f1, 1000);
    clearTimeout(timer1);
    
    var timer2 = setInterval(f2, 1000);
    clearInterval(timer2);

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

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

[JavaScript]: https://wangdoc.com/javascript/index.html