当前位置:首页 > JavaScript

js 实现暂停

2026-03-14 16:26:30JavaScript

暂停 JavaScript 执行的常见方法

使用 setTimeoutPromise 结合 async/await 实现延迟执行,模拟暂停效果。例如:

js 实现暂停

async function pauseExecution(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

// 使用方式
async function demo() {
  console.log("开始");
  await pauseExecution(2000); // 暂停2秒
  console.log("结束");
}
demo();

通过生成器函数控制流程

利用生成器函数(Generator)的 yield 特性暂停代码执行,直到手动触发恢复:

js 实现暂停

function* pausableFunction() {
  console.log("步骤1");
  yield; // 暂停点
  console.log("步骤2");
}

const generator = pausableFunction();
generator.next(); // 执行到第一个yield
setTimeout(() => generator.next(), 1000); // 1秒后继续

使用 Atomics.wait 实现线程级暂停(仅限 Node.js)

在 Node.js 的 Worker Threads 中,可通过共享内存和 Atomics 实现精确暂停:

const { Worker, isMainThread } = require('worker_threads');

if (isMainThread) {
  const sharedBuffer = new SharedArrayBuffer(4);
  new Worker(__filename, { workerData: sharedBuffer });
} else {
  const sharedArray = new Int32Array(workerData);
  console.log("Worker 开始");
  Atomics.wait(sharedArray, 0, 0, 2000); // 暂停2秒
  console.log("Worker 继续");
}

事件循环阻塞(不推荐)

通过同步阻塞事件循环实现暂停,但会冻结整个线程:

function blockPause(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

console.log("开始");
blockPause(3000); // 阻塞3秒
console.log("结束");

注意事项

  • 浏览器环境中避免使用同步阻塞方法,会导致页面无响应
  • Web Worker 中可使用 Atomics.wait,但主线程不支持
  • 现代前端应用推荐使用 async/await 方案,兼容性良好且不阻塞 UI

标签: js
分享给朋友:

相关文章

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…

js实现图片放大

js实现图片放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性实现图片放大效果。当鼠标悬停时,图片会平滑放大。 const img = document…

实现图片旋转js

实现图片旋转js

使用CSS transform属性旋转图片 通过CSS的transform属性可以轻松实现图片旋转。以下是一个简单的示例代码: const image = document.getElement…