当前位置:首页 > 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 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似: func…