js实现延时

使用 setTimeout 实现延时

setTimeout 是 JavaScript 中最常用的延时方法，用于在指定的毫秒数后执行函数或代码片段。

setTimeout(() => {
  console.log('这段代码将在 1000 毫秒后执行');
}, 1000);

可以传递参数给回调函数：

setTimeout((param1, param2) => {
  console.log(param1, param2);
}, 1000, '参数1', '参数2');

使用 Promise 实现延时

结合 Promise 可以创建更可控的延时逻辑，特别适合在 async/await 中使用。

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

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

使用 async/await 处理延时

async/await 语法让延时逻辑更清晰，避免回调地狱。

async function processWithDelay() {
  await new Promise(resolve => setTimeout(resolve, 1500));
  console.log('1.5秒后执行');
  return '完成';
}

取消延时执行

clearTimeout 可以取消尚未执行的延时操作。

const timeoutId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 1000);

clearTimeout(timeoutId);

递归实现间隔延时

通过递归调用 setTimeout 可以实现类似 setInterval 的效果，但能更好地控制每次执行的间隔。

function repeatWithDelay(count, delay) {
  if (count <= 0) return;

  setTimeout(() => {
    console.log(`执行第 ${count} 次`);
    repeatWithDelay(count - 1, delay);
  }, delay);
}

浏览器环境下的 requestAnimationFrame

对于需要与屏幕刷新率同步的动画延时，requestAnimationFrame 是更好的选择。

function animateWithDelay(timestamp) {
  // 动画逻辑
  requestAnimationFrame(animateWithDelay);
}

requestAnimationFrame(animateWithDelay);

Node.js 环境的 setImmediate

在 Node.js 中，setImmediate 可以在当前事件循环结束后立即执行代码，作为零延迟的替代方案。

setImmediate(() => {
  console.log('在当前事件循环结束后执行');
});