js实现暂停代码
实现暂停代码的方法
在JavaScript中，可以通过多种方式实现代码的暂停或延迟执行。以下是几种常见的方法：
使用 setTimeout 延迟执行
setTimeout 可以在指定的毫秒数后执行一段代码，从而实现暂停效果。
console.log("开始执行");
setTimeout(() => {
console.log("延迟2秒后执行");
}, 2000);使用 async/await 和 Promise
通过 Promise 和 async/await 可以更灵活地控制代码的暂停。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log("开始执行");
await sleep(2000);
console.log("暂停2秒后继续");
}
demo();使用 Generator 函数
Generator 函数可以通过 yield 暂停代码执行，并通过 next() 恢复执行。
function* pauseableCode() {
console.log("第一步");
yield;
console.log("第二步");
}
const generator = pauseableCode();
generator.next(); // 执行到第一个 yield
setTimeout(() => generator.next(), 2000); // 2秒后继续执行使用 requestAnimationFrame
对于动画或需要与浏览器帧同步的暂停，可以使用 requestAnimationFrame。
function pauseWithAnimation(duration, callback) {
const start = performance.now();
function checkTime(now) {
if (now - start < duration) {
requestAnimationFrame(checkTime);
} else {
callback();
}
}
requestAnimationFrame(checkTime);
}
console.log("开始");
pauseWithAnimation(2000, () => console.log("2秒后继续"));注意事项
setTimeout和Promise是异步的，不会阻塞主线程。Generator函数适合需要手动控制暂停的场景。requestAnimationFrame适用于动画或高频更新的场景。
根据具体需求选择合适的方法，避免在主线程中使用同步阻塞（如 while 循环），以免导致页面卡顿。
