当前位置:首页 > 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 等特殊方法:

js 实现延时执行

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

标签: js
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js画图实现

js画图实现

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

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…

js实现选择目录

js实现选择目录

在JavaScript中实现选择目录的功能通常需要结合浏览器API或第三方库,以下是几种常见方法: 使用 <input type="file"> 的 webkitdirectory 属性…