当前位置：首页 > news >正文

第五章：异步幻境 · 时间与数据的秘密

news 2025/5/23 10:11:12

剧情引入：时间停滞的幻境

林昊刚刚从 DOM 迷宫脱身，便坠入了一个灰白色的世界。这里的时间仿佛冻结，所有的操作延迟发生。面前的任务板显示：

“你点击了按钮，却没有立刻响应；你请求数据，却久久没有返回。这就是——异步幻境。”

导师零号缓缓出现，身后漂浮着数个时间齿轮和数据流动的幻象。

同步 vs 异步：你必须等待？

同步（Synchronous）：

代码一行一行地执行，前一行没执行完，下一行不会动。

console.log("1");
console.log("2");
console.log("3");

输出：1 2 3

异步（Asynchronous）：
某些操作可能延迟一段时间，比如网络请求、定时器。这些不会阻塞主线程，会“以后再回来”。

console.log("1");
setTimeout(() => {console.log("2");
}, 1000);
console.log("3");

输出：1 3 2

“时间，是一条可以被跳过的线索。” 零号导师说。

setTimeout & setInterval：时间控制术

林昊抬手召唤一块沙漏，导师讲解：

设置一次性延迟：

setTimeout(() => {console.log("一秒后执行");
}, 1000);

设置循环执行：

setInterval(() => {console.log("每隔两秒执行一次");
}, 2000);

clearTimeout() 与 clearInterval() 可用于停止执行。

回调函数 Callback：信使之术

林昊遇见一个封闭大门，门上刻着“先做完 A，再做 B”。

导师提示：

function doSomething(callback) {console.log("正在处理任务 A...");setTimeout(() => {console.log("任务 A 完成！");callback(); // 通知完成}, 1000);
}doSomething(() => {console.log("开始任务 B！");
});

回调是任务完成后的通知器。但回调多层嵌套，会陷入“回调地狱”。

Promise：时间的契约

一位身披蓝光的 NPC 向林昊递出一封契约——这就是 Promise。

const p = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) resolve("成功了！");else reject("失败了！");}, 1000);
});p.then(result => {console.log("结果：", result);
}).catch(error => {console.log("错误：", error);
});

.then() 是成功的响应
.catch() 是失败的处理
Promise 可以链式调用，避免层层嵌套

async/await：时间暂停术

林昊获得“时间暂停之眼”，能让异步代码写得像同步：

function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}async function run() {console.log("准备...");await delay(1000);console.log("一秒后执行");await delay(2000);console.log("再等两秒，完成！");
}run();

async 表示函数是异步的
await 会暂停代码，等待 Promise 完成再继续

🎯 本章总结：异步核心概念

概念	说明
setTimeout	延迟执行一次
setInterval	每隔一段时间执行
回调函数	任务完成后执行的函数
Promise	代表未来值的对象，可链式调用
async/await	让异步逻辑更清晰，像同步代码一样写