js实现暂停
实现暂停功能的方法
在JavaScript中实现暂停功能通常涉及异步编程或定时器的控制。以下是几种常见场景的实现方式：
使用Promise和setTimeout实现异步暂停
通过Promise封装setTimeout，结合async/await语法实现可读性强的暂停：
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log('开始');
await sleep(2000); // 暂停2秒
console.log('结束');
}
demo();通过Generator函数控制执行流程
利用yield关键字暂停Generator函数的执行：
function* pausedFunction() {
console.log('步骤1');
yield; // 暂停点
console.log('步骤2');
}
const gen = pausedFunction();
gen.next(); // 执行到第一个yield
// 手动调用gen.next()继续执行清除定时器实现强制暂停
对于setInterval/setTimeout的场景，通过清除定时器ID实现暂停：
let timerId;
function startInterval() {
timerId = setInterval(() => console.log('tick'), 1000);
}
function pauseInterval() {
clearInterval(timerId);
}使用AbortController控制异步操作
现代浏览器支持通过AbortSignal中断fetch请求等异步操作：
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已中止');
}
});
// 需要暂停时调用
controller.abort();基于Date对象的同步等待（不推荐）
注意：这会阻塞主线程，仅适用于特殊场景：
function syncPause(ms) {
const start = Date.now();
while (Date.now() - start < ms) {}
}注意事项
- 浏览器环境避免使用同步暂停，会导致页面冻结
- Node.js环境可使用
util.promisify(setTimeout)简化Promise封装 - 复杂流程建议使用状态机管理暂停/恢复逻辑
- Web Worker中可通过postMessage实现线程间暂停控制
