当前位置：首页 > JavaScript

js实现定时

2026-03-13 15:53:45JavaScript

使用 setTimeout 实现单次定时

setTimeout 用于在指定延迟后执行一次函数。基本语法如下：

setTimeout(() => {
  console.log('执行一次');
}, 1000); // 延迟1秒

可通过 clearTimeout 取消未执行的定时任务：

const timer = setTimeout(() => {}, 1000);
clearTimeout(timer);

使用 setInterval 实现循环定时

setInterval 会按照固定时间间隔重复执行函数：

const interval = setInterval(() => {
  console.log('每秒执行');
}, 1000);

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

注意：需手动清除以避免内存泄漏，尤其在组件卸载时（如React的 useEffect 返回清理函数）。

使用 requestAnimationFrame 实现动画定时

适合高频动画场景，与屏幕刷新率同步（通常60fps）：

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

可通过 cancelAnimationFrame 停止：

let animationId;
function start() {
  animationId = requestAnimationFrame(animate);
}
function stop() {
  cancelAnimationFrame(animationId);
}

使用 Promise 实现异步延迟

结合 setTimeout 封装延迟函数：

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

async function demo() {
  await delay(2000);
  console.log('2秒后执行');
}
demo();

Web Worker 实现后台定时

避免主线程阻塞的长时间定时任务：

js实现定时

// worker.js
let interval;
self.onmessage = (e) => {
  if (e.data === 'start') {
    interval = setInterval(() => postMessage('tick'), 1000);
  } else if (e.data === 'stop') {
    clearInterval(interval);
  }
};

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => console.log(e.data);
worker.postMessage('start');