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

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

林昊刚刚从 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	让异步逻辑更清晰，像同步代码一样写

---

本章练习任务

1. 使用 setTimeout 模拟“3秒后跳出提示框”；
2. 封装一个 wait(ms) 函数，使用 Promise；
3. 尝试用回调、Promise、async/await 写出一样的“做饭三步曲”：洗菜、炒菜、吃饭；
4. 使用 fetch() 请求一个公共 API（如 JSONPlaceholder），并用 async/await 获取并显示数据。

---

预告：第六章《事件风暴 · 用户的意志》

林昊即将进入下一试炼：理解并响应“用户的意志”——点击、输入、提交、移动，所有交互的核心——事件系统，即将来袭！