1- ### ` setTimeout ` and ` setInterval `
1+ ### ` setTimeout ` 和 ` setInterval `
22
3- Since JavaScript is asynchronous, it is possible to schedule the execution of a
4- function using the ` setTimeout ` and ` setInterval ` functions.
3+ 由於 Javascript 是一個非同步傳輸的系統，因此可以執行一個函式用 ` setTimeout ` 和 ` setInterval ` 。
54
6- > ** Note:** Timeouts are ** not** part of the ECMAScript Standard. They are
7- > implemented as part of the [ DOM] [ 1 ] .
5+ > ** 注意:** Timeouts 不在 ECMAScript 的標準中。它們是 [ DOM] [ 1 ] 其中的一部分
86
97 function foo() {}
108 var id = setTimeout(foo, 1000); // returns a Number > 0
119
12- When ` setTimeout ` is called, it returns the ID of the timeout and schedule
13- ` foo ` to run ** approximately** one thousand milliseconds in the future.
14- ` foo ` will then be executed ** once** .
10+ 當 ` setTimeout ` 被呼叫，它會回傳一個 ID 標準並是計畫在將來 ** 大約** 1000 毫秒後在在去呼叫 ` foo ` 函式。
11+ ` foo ` 函式只會被執行 ** 一次** 。
1512
16- Depending on the timer resolution of the JavaScript engine running the code, as
17- well as the fact that JavaScript is single threaded and other code that gets
18- executed might block the thread, it is by ** no means** a safe bet that one will
19- get the exact delay specified in the ` setTimeout ` call.
13+ 基於 JavaScript 引擎的計時策略，以及基本的單線程運行的方式，所以其他的程式碼可以被阻塞。
14+ 因此 ** 沒法確保** 函式會在 ` setTimeout ` 指定的時可被調用。
2015
21- The function that was passed as the first parameter will get called by the
22- * global object* , which means that [ ` this ` ] ( #function.this ) inside the called function
23- refers to the global object.
16+ 第一個參數被函式呼叫的會在 * 全域物件* 被呼叫，這代表 [ ` this ` ] ( #function.this ) 在這個函式會指向全域物件。
2417
2518 function Foo() {
2619 this.value = 42;
2720 this.method = function() {
28- // this refers to the global object
29- console.log(this.value); // will log undefined
21+ // 指向全域
22+ console.log(this.value); // 會跑出 undefined
3023 };
3124 setTimeout(this.method, 500);
3225 }
3326 new Foo();
3427
28+ > ** 注意: ** ` setTimeout ` 第一個參數是 ** 參數的物件** ，這是一個很常見的錯誤使用 `setTimeout(foo(), 1000)，
29+ > 這裡會調用 ` foo ` 的 ** return value** 而 ** 不是** ` foo ` 本身。
30+ > 如果函式返回 ` undefined ` ， ` setTimeout ` 也不會出錯。
3531
36- > ** Note:** As ` setTimeout ` takes a ** function object** as its first parameter, an
37- > common mistake is to use ` setTimeout(foo(), 1000) ` , which will use the
38- > ** return value** of the call ` foo ` and ** not** ` foo ` . This is, most of the time,
39- > a silent error, since when the function returns ` undefined ` ` setTimeout ` will
40- > ** not** raise any error.
32+ ### ` setInterval ` 的堆調用
4133
42- ### Stacking Calls with ` setInterval `
34+ ` setTimeout ` 只會在函式上跑一次而已， ` setInterval ` - 則會在每隔 ` X ` 毫秒執行函式一次。但不鼓勵這種寫法。
4335
44- While ` setTimeout ` only runs the function once, ` setInterval ` - as the name
45- suggests - will execute the function ** every** ` X ` milliseconds, but its use is
46- discouraged.
47-
48- When code that is being executed blocks the timeout call, ` setInterval ` will
49- still issue more calls to the specified function. This can, especially with small
50- intervals, result in function calls stacking up.
36+ 當回傳函式的執行被阻塞時， ` setInterval ` 仍然會發佈更多的回傳函式。在很小的定時間隔情況像會使得回傳函式被堆疊起來。
5137
5238 function foo(){
53- // something that blocks for 1 second
39+ // 執行 1 秒
5440 }
5541 setInterval(foo, 1000);
5642
57- In the above code, ` foo ` will get called once and will then block for one second.
43+ 上面的程式中， ` foo ` 會執行一次然後被阻塞了義分鐘
5844
59- While ` foo ` blocks the code, ` setInterval ` will still schedule further calls to
60- it. Now, when ` foo ` has finished, there will already be ** ten** further calls to
61- it waiting for execution.
45+ 在 ` foo ` 被阻塞的時候 ` setInterval ` 還是會組織將對回傳函式的調用。因此當第一次 ` foo ` 函式調用結束時，已經有 ** 10** 次函式的調用在等待執行。
6246
63- ### Dealing with Possible Blocking Code
47+ ### 處理可能被阻塞的調用
6448
65- The easiest solution, as well as most controllable solution, is to use ` setTimeout ` within
66- the function itself.
49+ 最簡單的解決方法，也是最容易控制的解決方法，就是在函式中使用 ` setTimeout ` 。
6750
6851 function foo(){
6952 // something that blocks for 1 second
7053 setTimeout(foo, 1000);
7154 }
7255 foo();
7356
74- Not only does this encapsulate the ` setTimeout ` call, but it also prevents the
75- stacking of calls and gives additional control. ` foo ` itself can now decide
76- whether it wants to run again or not.
57+ 這樣不只封裝了 ` setTimeout ` ，也防止了堆疊的呼叫，還有給它更多的控制。 ` foo ` 可以去決定要不要繼續執行。
7758
78- ### Manually Clearing Timeouts
59+ ### 手動清理 Timeouts
7960
80- Clearing timeouts and intervals works by passing the respective ID to
81- ` clearTimeout ` or ` clearInterval ` , depending on which ` set ` function was used
82- in the first place.
61+ 清除 timeouts 所產生的 ID 標準傳遞給 ` clearTimeout ` 或 ` clearInterval ` 函式來清除定時，
62+ 至於使用哪個函式取決於調用的時候使用的是 ` setTimeout ` 還是 ` setInterval ` 。
8363
8464 var id = setTimeout(foo, 1000);
8565 clearTimeout(id);
8666
87- ### Clearing All Timeouts
67+ ### 清除所有 Timeouts
8868
89- As there is no built-in method for clearing all timeouts and/or intervals,
90- it is necessary to use brute force in order to achieve this functionality.
69+ 由於沒有一個內建的方法可以一次清空所有的 timeouts 和 intervals，所以只有用暴力法來達到這樣的需求。
9170
9271 // clear "all" timeouts
9372 for(var i = 1; i < 1000; i++) {
9473 clearTimeout(i);
9574 }
9675
97- But there might still be timeouts that are unaffected by this arbitrary number.
98- Another way of doing this is to consider that the ID given to a timeout is
99- incremented by one every time you call ` setTimeout ` .
76+ 可能還有一些定石器不會在上面的代碼中被清除，因此我們可以事先保存所有的定時器 ID，然後一把清除。
77+
10078
10179 // clear "all" timeouts
10280 var biggestTimeoutId = window.setTimeout(function(){}, 1),
@@ -105,12 +83,7 @@ incremented by one every time you call `setTimeout`.
10583 clearTimeout(i);
10684 }
10785
108- Even though this works on all major browsers today, it isn't specified that
109- the IDs should be ordered that way and it may change. Therefore, it is instead
110- recommended to keep track of all the timeout IDs, so they can be cleared
111- specifically.
112-
113- ### Hidden Use of ` eval `
86+ ### 隱藏使用 ` eval `
11487
11588` setTimeout ` and ` setInterval ` can also take a string as their first parameter.
11689This feature should ** never** be used because it internally makes use of ` eval ` .
0 commit comments