当前位置:首页 > JavaScript

js 实现延时执行

2026-02-02 22:10:01JavaScript

使用 setTimeout 实现基础延时执行

setTimeout 是 JavaScript 中最常用的延时执行方法,接受回调函数和毫秒级延迟时间作为参数。示例代码:

setTimeout(() => {
  console.log('延时2秒后执行');
}, 2000);

结合 Promise 实现链式调用

通过封装 setTimeout 到 Promise 中,可以实现更优雅的异步流程控制:

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

delay(3000).then(() => {
  console.log('延时3秒后执行');
});

使用 async/await 实现同步式写法

在异步函数中结合 await 可以实现类似同步代码的延时效果:

async function delayedAction() {
  console.log('开始等待');
  await new Promise(resolve => setTimeout(resolve, 1500));
  console.log('1.5秒后继续执行');
}

带取消功能的延时执行

通过保存 setTimeout 返回的 timer ID,可以实现延时任务的取消:

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

clearTimeout(timerId);

循环间隔执行与清除

setInterval 可实现周期性延时执行,需配合 clearInterval 停止:

let counter = 0;
const intervalId = setInterval(() => {
  console.log(`第${++counter}次执行`);
  if(counter >= 5) clearInterval(intervalId);
}, 1000);

浏览器环境下的 requestAnimationFrame

对于需要与屏幕刷新率同步的延时场景,推荐使用:

function delayedAnimation(callback, delay) {
  let start = performance.now();
  function frame(time) {
    if (time - start >= delay) {
      callback();
    } else {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}

Web Worker 中的延时方案

在 Web Worker 中同样可以使用 setTimeout,但需注意 worker 环境的特殊性:

// worker.js
self.setTimeout(() => {
  self.postMessage('延时完成');
}, 500);

Node.js 环境下的定时器扩展

Node.js 除了浏览器相同的定时器 API,还提供了 setImmediate 等特殊方法:

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

js 实现延时执行

标签: js
分享给朋友:

相关文章

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inp…

js实现选题

js实现选题

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

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现投球

js实现投球

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

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否…