js实现暂停
实现 JavaScript 暂停的几种方法
使用 setTimeout 或 setInterval 结合 clearTimeout 或 clearInterval
通过设置定时器并在需要时清除定时器来实现暂停效果。定时器可以用于延迟执行或重复执行代码。
let timer;
function startTimer() {
timer = setInterval(() => {
console.log('Running...');
}, 1000);
}
function pauseTimer() {
clearInterval(timer);
}使用 Promise 和 async/await
通过创建一个可暂停的 Promise 来实现更精细的控制。这种方法适用于需要暂停异步操作的情况。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function runWithPause() {
console.log('Start');
await sleep(2000); // 暂停2秒
console.log('Resumed');
}使用生成器函数（Generator）
生成器函数可以通过 yield 关键字暂停执行，并在需要时通过 next() 方法恢复执行。
function* pausableFunction() {
console.log('Step 1');
yield;
console.log('Step 2');
}
const generator = pausableFunction();
generator.next(); // 执行到第一个 yield
// 暂停...
generator.next(); // 继续执行使用事件监听和标志位
通过设置标志位来控制代码的执行流程，结合事件监听实现暂停和恢复。
let isPaused = false;
function process() {
if (isPaused) return;
console.log('Processing...');
setTimeout(process, 1000);
}
document.getElementById('pauseBtn').addEventListener('click', () => {
isPaused = true;
});
document.getElementById('resumeBtn').addEventListener('click', () => {
isPaused = false;
process();
});使用 Web Workers
对于需要长时间运行的任务，可以使用 Web Workers 并在需要时通过 postMessage 暂停或恢复。
const worker = new Worker('worker.js');
worker.postMessage({ command: 'start' });
// 暂停
worker.postMessage({ command: 'pause' });
// 恢复
worker.postMessage({ command: 'resume' });注意事项
JavaScript 是单线程语言，真正的线程暂停会阻塞整个页面。上述方法均是非阻塞的实现方式，适用于不同的场景。
定时器方法适合简单的延迟或间隔执行。
Promise 和 async/await 适合处理异步操作的暂停。
生成器函数提供了更细粒度的控制，但语法稍复杂。
事件监听和标志位适合用户交互控制的场景。
Web Workers 适用于需要后台运行的密集型任务。
