You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the task <info:task/animate-circle>an animated growing circle is shown.
4
+
在課題 <info:task/animate-circle>中，成長的圈圈以動畫呈現。
5
5
6
-
Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly.
Add a callback argument: `showCircle(cx, cy, radius, callback)`to be called when the animation is complete. The `callback`should receive the circle `<div>`as an argument.
Copy file name to clipboardexpand all lines: 1-js/11-async/01-callbacks/article.md
+68-69
Original file line number
Diff line number
Diff line change
@@ -1,68 +1,67 @@
1
1
2
2
3
-
# Introduction: callbacks
3
+
# 介紹： 回呼
4
4
5
5
```warn header="We use browser methods in examples here"
6
-
To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods: specifically, loading scripts and performing simple document manipulations.
If you're not familiar with these methods, and their usage in the examples is confusing, you may want to read a few chapters from the [next part](/document) of the tutorial.
Although, we'll try to make things clear anyway. There won't be anything really complex browser-wise.
10
+
儘管如此，我們還是會試著讓事情保持單純。不會有任何瀏覽器方面的複雜事物。
11
11
```
12
12
13
-
Many functions are provided by JavaScript host environments that allow you to schedule *asynchronous* actions. In other words, actions that we initiate now, but they finish later.
For instance, one such function is the `setTimeout`function.
15
+
舉例來說， `setTimeout`就是一個這樣的函式。
16
16
17
-
There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters).
17
+
真實世界中，還有其它非同步動作的例子。像是載入腳本及模組（我們會在後續的章節中介紹它們）。
18
18
19
-
Take a look at the function `loadScript(src)`, that loads a script with the given `src`:
19
+
看看下面的 `loadScript(src)` 函式，它載入了指定 `src` 位置的腳本：
20
20
21
21
```js
22
22
functionloadScript(src) {
23
-
//creates a <script> tag and append it to the page
24
-
//this causes the script with given src to start loading and run when complete
23
+
//建立一個 <script> 標籤，然後將它加到頁面上
24
+
//這會讓 src 位置的腳本，開始被載入，並且在載入完成後開始執行
25
25
let script =document.createElement('script');
26
26
script.src= src;
27
27
document.head.append(script);
28
28
}
29
29
```
30
30
31
-
It appends to the document the new, dynamically created, tag `<script src="…">`with given `src`. The browser automatically starts loading it and executes when complete.
Naturally, the browser probably didn't have time to load the script. As of now, the `loadScript`function doesn't provide a way to track the load completion. The script loads and eventually runs, that's all. But we'd like to know when it happens, to use new functions and variables from that script.
alert(`Cool, the script ${script.src} is loaded`);
105
-
alert( _ ); //function declared in the loaded script
104
+
alert( _ ); //宣告在載入腳本的函式
106
105
});
107
106
*/!*
108
107
```
109
108
110
-
That's called a "callback-based" style of asynchronous programming. A function that does something asynchronously should provide a `callback`argument where we put the function to run after it's complete.
3.We load `3.js`, then if there's no error -- do something else`(*)`.
230
+
上述程式碼中：
231
+
1.我們載入 `1.js`，然後如果沒有錯誤的話。
232
+
2.我們載入 `2.js`，然後如果沒有錯誤的話。
233
+
3.我們載入 `3.js`，然後如果沒有錯誤的話。 -- 做其它的事`(*)`.
235
234
236
-
As calls become more nested, the code becomes deeper and increasingly more difficult to manage, especially if we have real code instead of `...`that may include more loops, conditional statements and so on.
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.
265
+
〝金字塔〞狀的巢狀呼叫，隨著每一個非同步動作向右成長。很快地失去控制。
267
266
268
-
So this way of coding isn't very good.
267
+
因此這樣的程式撰寫方式並不夠好。
269
268
270
-
We can try to alleviate the problem by making every action a standalone function, like this:
269
+
我們可以試著藉由將每一個動作獨立為一個函式來舒緩這個問題，像這樣：
271
270
272
271
```js
273
272
loadScript('1.js', step1);
@@ -294,17 +293,17 @@ function step3(error, script) {
294
293
if (error) {
295
294
handleError(error);
296
295
} else {
297
-
// ...continue after all scripts are loaded (*)
296
+
// ...在所有腳本載入後執行 (*)
298
297
}
299
298
};
300
299
```
301
300
302
-
See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
301
+
看到了嗎？它的功能相同，但它現在沒了過深的巢狀，因為我們將每個動作都做成獨立的全域函式。
303
302
304
-
It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that one needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
Also, the functions named `step*`are all of single use, they are created only to avoid the "pyramid of doom." No one is going to reuse them outside of the action chain. So there's a bit of namespace cluttering here.
0 commit comments