当前位置：首页 > news >正文

定时器的知识点总结

news 来源：原创 2025/5/26 7:08:16

一、什么是 JavaScript 定时器

JavaScript 定时器是 JavaScript 提供的用于在指定时间间隔后执行代码的机制。它允许我们在程序中设置延迟执行或周期性执行的任务，为页面增添动态性和交互性。在 JavaScript 中，主要有两种类型的定时器：setTimeout() 和 setInterval()，它们各自有着独特的功能和应用场景。

二、setTimeout () 定时器

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行一次指定的函数或代码段。

window.setTimeout(调用函数, (延迟的毫秒数), 参数1, 参数2,...);

其中，window 可以省略；调用函数 可以是直接定义的函数、函数名，也可以是字符串形式的 '函数名()'（不过使用字符串形式类似 eval() 执行代码，存在安全风险，不推荐使用）；延迟的毫秒数 表示等待多久后执行函数，省略时默认是 0，且必须以毫秒为单位；参数1, 参数2,... 是向延迟函数传递的额外参数（IE9 以上支持）。

setTimeout(function () {
    console.log('三秒后执行我');
}, 3000);

上述代码会在 3 秒（3000 毫秒）后在控制台输出 “三秒后执行我”。这里的函数 function () { console.log('三秒后执行我'); } 就是回调函数，它不会立即执行，而是等待设定的时间结束后才被调用。

停止 setTimeout () 定时器

如果我们想要在定时器到期之前取消它，可以使用 clearTimeout() 方法。

window.clearTimeout(timeoutID);

window 可省略，timeoutID 是通过 setTimeout() 创建的定时器的标识符。

var timeoutID = setTimeout(function () {
    console.log('本来应该执行我，但可能被取消');
}, 5000);
var cancelButton = document.querySelector('#cancelButton');
cancelButton.addEventListener('click', function () {
    clearTimeout(timeoutID);
});

在这个例子中，我们创建了一个 5 秒后执行的定时器。同时，给一个按钮添加了点击事件，当点击按钮时，通过 clearTimeout(timeoutID) 取消了定时器，这样定时器的回调函数就不会被执行。

三、setInterval () 定时器

setInterval() 方法用于重复调用一个函数，每隔指定的时间间隔，就会去调用一次回调函数。

window.setInterval(回调函数, (间隔的毫秒数), 参数1, 参数2,...);

同样，window 可省略；回调函数 的形式与 setTimeout() 中的类似；间隔的毫秒数 省略默认是 0，必须以毫秒为单位，表示每隔多久自动调用一次函数；参数1, 参数2,... 是传递给回调函数的额外参数。

var count = 0;
var intervalID = setInterval(function () {
    count++;
    console.log('每隔一秒，我被执行一次，这是第 ' + count + ' 次');
}, 1000);

清除 setInterval () 定时器

当我们不再需要 setInterval() 定时器持续执行时，可以使用 clearInterval() 方法来取消它。

window.clearInterval(intervalID);

window 可省略，intervalID 是通过 setInterval() 创建的定时器的标识符。

var startButton = document.querySelector('#startButton');
var stopButton = document.querySelector('#stopButton');
var intervalID;
startButton.addEventListener('click', function () {
    intervalID = setInterval(function () {
        console.log('定时器启动，持续执行');
    }, 2000);
});
stopButton.addEventListener('click', function () {
    clearInterval(intervalID);
});

在这个示例中，点击 “开始” 按钮会启动一个定时器，每隔 2 秒在控制台输出信息；点击 “停止” 按钮则会通过 clearInterval(intervalID) 清除定时器，使其不再执行。