当前位置：首页 > JavaScript

js实现定时执行

2026-02-02 21:01:58JavaScript

定时执行的方法

使用 setTimeout

setTimeout 用于在指定的毫秒数后执行一次函数。语法如下：

setTimeout(function, delay, [arg1], [arg2], ...);

示例代码：

setTimeout(() => {
    console.log('执行一次');
}, 2000); // 2秒后执行

使用 setInterval

setInterval 用于每隔指定的毫秒数重复执行函数。语法如下：

js实现定时执行

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

示例代码：

const intervalId = setInterval(() => {
    console.log('重复执行');
}, 1000); // 每1秒执行一次

// 清除定时器
clearInterval(intervalId);

使用 requestAnimationFrame

requestAnimationFrame 适合动画或高频次定时任务，会在浏览器下一次重绘之前执行。语法如下：

js实现定时执行

requestAnimationFrame(callback);

示例代码：

function animate() {
    console.log('动画帧执行');
    requestAnimationFrame(animate);
}
animate();

使用 Promise 和 async/await

结合 Promise 和 async/await 实现更灵活的定时控制。示例代码：

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
    await delay(1000);
    console.log('1秒后执行');
}
run();

使用 Web Workers

对于长时间运行的定时任务，可以使用 Web Workers 避免阻塞主线程。示例代码：

// worker.js
self.onmessage = function(e) {
    setInterval(() => {
        self.postMessage('定时执行');
    }, 1000);
};

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
    console.log(e.data);
};