js实现定时执行
定时执行的方法
使用 setTimeout
setTimeout 用于在指定的毫秒数后执行一次函数。语法如下：
setTimeout(function, delay, [arg1], [arg2], ...);示例代码：
setTimeout(() => {
console.log('执行一次');
}, 2000); // 2秒后执行使用 setInterval
setInterval 用于每隔指定的毫秒数重复执行函数。语法如下：
setInterval(function, delay, [arg1], [arg2], ...);示例代码：
const intervalId = setInterval(() => {
console.log('重复执行');
}, 1000); // 每1秒执行一次
// 清除定时器
clearInterval(intervalId);使用 requestAnimationFrame
requestAnimationFrame 适合动画或高频次定时任务，会在浏览器下一次重绘之前执行。语法如下：
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);
};注意事项
setTimeout和setInterval的延迟时间不保证精确，受浏览器事件循环影响。- 高频次任务使用
requestAnimationFrame更流畅。 - 长时间任务建议使用
Web Workers避免页面卡顿。 - 清除定时器使用
clearTimeout或clearInterval防止内存泄漏。
