js异步实现暂停
异步暂停的实现方法
在JavaScript中实现异步操作的暂停可以通过多种方式完成，以下是几种常见的方法：
使用Promise和setTimeout
通过结合Promise和setTimeout可以模拟异步暂停的效果。创建一个返回Promise的函数，利用setTimeout在指定时间后resolve。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log('开始');
await sleep(2000); // 暂停2秒
console.log('结束');
}
demo();使用Generator函数
Generator函数可以通过yield关键字暂停执行，适合需要更精细控制异步流程的场景。
function* asyncTask() {
console.log('步骤1');
yield new Promise(resolve => setTimeout(resolve, 1000));
console.log('步骤2');
}
const gen = asyncTask();
gen.next().value.then(() => gen.next());使用async/await与条件判断
结合async/await和条件变量可以实现基于条件的暂停，适用于需要等待特定条件满足的场景。
let isPaused = false;
async function run() {
while (true) {
if (isPaused) {
await new Promise(resolve => setTimeout(resolve, 100));
continue;
}
console.log('运行中');
await sleep(500);
}
}
// 外部控制
setTimeout(() => { isPaused = true; }, 2000);
setTimeout(() => { isPaused = false; }, 4000);
run();使用AbortController
对于需要取消的异步操作，AbortController提供了一种标准的中断机制，适合fetch请求等场景。
const controller = new AbortController();
const signal = controller.signal;
async function fetchData() {
try {
const response = await fetch('url', { signal });
console.log(await response.json());
} catch (e) {
if (e.name === 'AbortError') {
console.log('请求已中止');
}
}
}
// 中止请求
setTimeout(() => controller.abort(), 1000);
fetchData();注意事项
- Promise方案适合简单的延迟场景，但无法中途取消。
- Generator方案提供更细粒度控制，但需要手动管理迭代器。
- 条件变量方案适合需要响应外部状态的场景，注意避免忙等待。
- 浏览器环境下优先考虑AbortController这类标准API。
