当前位置:首页 > JavaScript

js实现delay

2026-03-14 21:17:29JavaScript

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

使用setTimeout

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

js实现delay

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

使用Promise和async/await

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

js实现delay

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

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实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现基…