js实现暂停
实现暂停功能的几种方法
在JavaScript中实现暂停功能可以通过多种方式实现，以下是几种常见的方法：
使用setTimeout和递归
通过递归调用setTimeout可以实现类似暂停的效果，这种方式不会阻塞主线程。
function pause(delay) {
return new Promise(resolve => setTimeout(resolve, delay));
}
async function delayedFunction() {
console.log('Start');
await pause(2000); // 暂停2秒
console.log('End');
}
delayedFunction();使用Promise和setTimeout
结合Promise和setTimeout可以创建更灵活的暂停机制，适用于异步函数中。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function example() {
console.log('Waiting...');
await sleep(3000);
console.log('Done waiting');
}
example();使用Generator函数
通过Generator函数可以实现更复杂的暂停和恢复逻辑，适合需要多次暂停的场景。
function* pauseableFunction() {
console.log('Step 1');
yield;
console.log('Step 2');
}
const generator = pauseableFunction();
generator.next(); // 输出 "Step 1"
// 暂停一段时间后继续执行
setTimeout(() => generator.next(), 1000); // 1秒后输出 "Step 2"使用Web Worker
如果需要在不阻塞主线程的情况下实现长时间暂停，可以使用Web Worker。
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage('start');
// worker.js
self.onmessage = function(e) {
if (e.data === 'start') {
setTimeout(() => self.postMessage('done'), 5000);
}
};使用requestAnimationFrame
对于需要与动画帧同步的暂停，可以使用requestAnimationFrame。
function pauseAnimation(ms) {
const start = performance.now();
function checkTime(time) {
if (time - start < ms) {
requestAnimationFrame(checkTime);
}
}
requestAnimationFrame(checkTime);
}
console.log('Animation paused');
pauseAnimation(2000); // 暂停2秒
console.log('Animation resumed');注意事项
- 避免使用同步的暂停方法（如
while循环），这会阻塞主线程导致页面无响应。 - 在异步函数中，使用
await可以更清晰地实现暂停效果。 - 对于复杂的暂停逻辑，考虑使用状态机或Generator函数来管理执行流程。
以上方法可以根据具体需求选择适合的实现方式。
