JavaScript 异步编程

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 第一步：创建会等待的 Promise
定义 delay(ms)，返回 Promise，并在指定毫秒后完成（resolve）。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Define function: delay(ms)
Console should output: Done

2) Beginner Explanation (Current Step)

Step task: 定义 delay(ms)，返回 Promise，并在指定毫秒后完成（resolve）。
Define function(s): delay, then verify results with test inputs.
A function is a reusable block of code. Define it first, then call it.
`console.log(...)` just prints output so you can check if your code works as expected.

3) Starter Template (Type along)

function delay(ms) {
  // TODO: write your logic here
}
console.log(delay());

4) Rule Validation & Hints

📋 当前任务 - Step 1

定义 delay 函数
输出 Done

💡 步骤提示

🔐 学习提示

📖 快速参考

await 只能出现在 async 函数内部；如果报错先检查函数前是否写了 async。

About This Exercise

你可以把异步理解成：“任务要等一会儿才有结果”。

例如请求接口、等待定时器、读取远程数据，都不会立刻返回。

这一关你会建立异步三步法：

先写 Promise（会等待）
再用 async/await（写法更像同步）
最后用 try/catch（失败不崩溃）

Beginner⏱ 25-30 min

Learning Objectives

理解同步和异步在执行时机上的区别
能写出返回 Promise 的延迟函数
掌握 async/await 的基础用法
能用 try/catch 给异步操作加兜底

Scenario

你在写一个学习页面的数据加载逻辑：页面启动后先等待数据，再渲染内容；如果请求失败，也要给用户稳定反馈。

Why Do This

Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
Rule-based validation helps you develop a testable frontend mindset.

Hands-on Practice

Write out the event flow in comments first, then implement the functions.
Add an edge case branch for invalid input or empty data.
Explain why each validation rule is needed.

Common Mistakes

Only testing the happy path without verifying edge inputs or repeated clicks.
Mixing event binding and state updates together, making future maintenance difficult.
Console output looks correct but the UI is not actually updated.

Deliverable

A reusable interaction component scaffold (event flow description + key functions + edge case handling).

My Progress

Completed Steps0 / 3

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

Reflection Questions (Recommended)

Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).

What edge case did you add? Why is it easy to miss?

How confident are you with this interaction pattern now?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it