setInterval

setInterval 是 JavaScript 中的一个函数，用于在指定的时间间隔后重复执行一个函数。它属于 WindowOrWorkerGlobalScope 接口，通常用于浏览器环境中的 window 对象或 Web Worker 中。

语法

var intervalID = setInterval(function, delay, [arg1, arg2, ...]);

 

• function：要重复执行的函数。
• delay：每次执行之间的延迟时间，以毫秒为单位。
• arg1, arg2, ...：可选参数，传递给要执行的函数。

返回值

setInterval 返回一个唯一的 intervalID，可以用于后续的 clearInterval 调用，以停止重复执行。

示例

示例 1：简单的定时器

每 1000 毫秒（1 秒）打印一次消息：

JavaScript

复制

var intervalID = setInterval(function() {
    console.log("Hello, World!");
}, 1000);

 

示例 2：传递参数

每 1000 毫秒打印一次带有参数的消息：

 

function printMessage(message) {
    console.log(message);
}

var intervalID = setInterval(printMessage, 1000, "Hello, World!");

 

示例 3：停止定时器

使用 clearInterval 停止定时器：

 

var intervalID = setInterval(function() {
    console.log("Hello, World!");
}, 1000);

// 停止定时器
clearInterval(intervalID);

 

注意事项

1. 精度问题：
   • setInterval 的精度取决于浏览器的实现和当前的系统负载。如果系统负载很高，定时器可能会延迟执行。
   • 如果需要高精度的定时器，可以考虑使用 requestAnimationFrame 或 performance.now。
2. 最小延迟：
   • 在大多数浏览器中，setInterval 的最小延迟时间是 4 毫秒。如果设置的延迟时间小于 4 毫秒，浏览器会自动调整为 4 毫秒。
3. 任务队列：
   • setInterval 将任务添加到任务队列中，如果任务队列中有其他任务正在执行，定时器任务可能会延迟执行。
4. 页面隐藏或不活动：
   • 当页面被隐藏或不活动时，浏览器可能会降低定时器的精度，以节省资源。这被称为“节流”（throttling）。

高精度定时器

如果需要高精度的定时器，可以使用 performance.now 和 requestAnimationFrame。以下是一个示例：

 

let lastTime = performance.now();

function update() {
    let now = performance.now();
    let deltaTime = now - lastTime;
    lastTime = now;

    console.log(`Time since last update: ${deltaTime} ms`);

    requestAnimationFrame(update);
}

requestAnimationFrame(update);

 

总结

setInterval 是一个简单且强大的工具，用于在指定的时间间隔后重复执行一个函数。通过合理使用 setInterval 和 clearInterval，可以实现各种定时任务。如果需要高精度的定时器，可以考虑使用 performance.now 和 requestAnimationFrame。