当前位置:首页 > 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 可以实现类似同步代码的延时效果:

js 实现延时执行

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 停止:

js 实现延时执行

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

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现密码

js实现密码

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

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…