当前位置:首页 > JavaScript

js实现delay

2026-03-14 21:17:29JavaScript

在JavaScript中实现延迟执行可以通过多种方式实现,以下是几种常见的方法:

使用setTimeout

setTimeout是JavaScript中用于延迟执行函数的内置方法。它接受一个回调函数和延迟时间(毫秒)作为参数。

setTimeout(() => {
  console.log('This message will appear after 2 seconds');
}, 2000);

使用Promise和async/await

通过Promise封装setTimeout,结合async/await语法,可以实现更清晰的延迟逻辑。

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

async function delayedAction() {
  console.log('Start');
  await delay(3000);
  console.log('End after 3 seconds');
}
delayedAction();

使用Generator函数

Generator函数结合yield可以暂停执行,但需要手动控制迭代器。

function* delayedGenerator() {
  console.log('First step');
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Second step after 1 second');
}

const generator = delayedGenerator();
generator.next().value.then(() => generator.next());

使用requestAnimationFrame

对于需要与浏览器渲染帧同步的延迟,可以使用requestAnimationFrame

js实现delay

function delayWithRAF(callback, ms) {
  const start = performance.now();
  function frame(time) {
    if (time - start >= ms) {
      callback();
    } else {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}

delayWithRAF(() => console.log('Delayed with RAF'), 2000);

注意事项

  • setTimeout的延迟时间并非精确,受事件循环影响。
  • 对于长时间延迟任务,建议使用Web Workers避免阻塞主线程。
  • 在Node.js环境中,setImmediateprocess.nextTick可用于类似场景。

以上方法可根据具体需求选择,Promise方案在现代前端开发中更为常用。

标签: jsdelay
分享给朋友:

相关文章

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…