当前位置:首页 > 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如何实现继承

js如何实现继承

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

js实现列表

js实现列表

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

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…