From 19fedbebfb9fa3aafd489db30ba5cff449569b68 Mon Sep 17 00:00:00 2001 From: SImonAllen <61531170+SimonAllen0901@users.noreply.github.com> Date: Fri, 27 Aug 2021 01:38:33 +0800 Subject: Update Web/JavaScript/EventLoop, zh-TW (#2205) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 補上剩餘翻譯與風格修正 翻譯： 把此章節剩餘翻譯補完 風格整理： 1. 「程序」改成「程式」 2. 冒號改成全型冒號 3. 引號改成中文引號 4. 「函數」與「函式」夾雜，統一改成「函式」 5. 修正原212行未翻譯完成段落 6. 整理中英數夾雜時多出來的單獨空格 7. 破折號整理成一致 * Web/JavaScript/EventLoop 更新： 1. 修正圖片顯示錯誤 2. http 連結改 https * Web/JavaScript/EventLoop 更新： 1. 按 Flaws 提示移除 img style 2. 原69行連結修正 3. 補上 Adding messages 段落缺少的程式範例與翻譯 4. 原91行連結修正 5. 原103行連結修正 * Web/JavaScript/EventLoop 更新： 補上缺少的 HTML element --- files/zh-tw/web/javascript/eventloop/index.html | 28 ++++++++++++++++++---- .../the_javascript_runtime_environment_example.svg | 1 + 2 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg (limited to 'files/zh-tw') diff --git a/files/zh-tw/web/javascript/eventloop/index.html b/files/zh-tw/web/javascript/eventloop/index.html index 5518397de9..4dcfca821f 100644 --- a/files/zh-tw/web/javascript/eventloop/index.html +++ b/files/zh-tw/web/javascript/eventloop/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/EventLoop

視覺化呈現（Visual representation）

-

Stack, heap, queue

+

Stack, heap, queue

堆疊（Stack）

@@ -66,11 +66,29 @@ console.log(bar(7));

瀏覽器中，會添加訊息是由於事件的觸動，以及伴隨著事件的監聽者。若是沒有事件監聽者，則該事件的觸動就不會形成訊息，例如說一個點擊的動作伴隨著點擊事件監聽者就會形成一個新的訊息，其他類事件亦然。

-

呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 時有兩個參數：第一個是會被加入到佇列中的訊息，第二個參數為延遲時間（預設為 0）。若無其他訊息在佇列中，則這個訊息會在設定的延遲後立刻被處理。但若佇列內有其他訊息，setTimeout 的訊息必須等到其他訊息處理完。因此第二個時間參數只能表示為最少時間，而不是一個精準的時間。

+

呼叫 setTimeout 時有兩個參數：第一個是會被加入到佇列中的訊息，第二個參數為延遲時間（預設為0）。若無其他訊息在佇列中，則這個訊息會在設定的延遲後立刻被處理。但若佇列內有其他訊息，setTimeout 的訊息必須等到其他訊息處理完。因此第二個時間參數只能表示為最少時間，而不是一個精準的時間。

+ +

這裡有個示範此概念的例子（setTimeout在其計時器到期後不會立刻執行）：

+ +
+  const s = new Date().getSeconds();
+
+  setTimeout(function() {
+    // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
+    console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
+  }, 500)
+
+  while (true) {
+    if (new Date().getSeconds() - s >= 2) {
+      console.log("Good, looped for 2 seconds")
+      break;
+    }
+  }
+

零延遲（Zero delays）

-

「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 函式並非是程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。
+

「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 setTimeout 函式並非是程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。
在下面範例中，「this is just a message」會寫在 setTimeout 的回呼訊息被執行之前，因為該時間段參數是要求執行環境處理所需的最少等待時間，而非一個保證時間。

(function() {
@@ -100,10 +118,10 @@ console.log(bar(7));
 
 
多個執行環境的互相溝通（Several Runtime communicating together）

 
-
Web worker 或是跨來源網域（cross-origin）的 iframe 都會有各自的堆疊、堆積及訊息佇列。兩個特定的執行環境只能透過 postMessage 這個方法來溝通。如果一個執行環境有監聽 message 事件時，另一個執行環境便可透過這個方法來新增一個訊息到該執行環境中。

+
Web worker 或是跨來源網域（cross-origin）的 iframe 都會有各自的堆疊、堆積及訊息佇列。兩個特定的執行環境只能透過 postMessage 這個方法來溝通。如果一個執行環境有監聽 message 事件時，另一個執行環境便可透過這個方法來新增一個訊息到該執行環境中。

 
 
絕不阻塞（Never blocking）

 
 
事件循環這個模型有一個非常有趣的特色就是永不阻塞，這與其他語言不一樣。I/O 的處理通常會經由事件以及回呼函式實作，因此當一個程式正在等待 IndexedDB 的查詢結果或是回傳 XHR 請求時，依舊可以執行其他像是使用者輸入的動作。

 
-
例外（exceptions）永遠存在，像是 alert 或是同步的 XHR，但好的實作方式就是避開他們。另外要注意個是，例外的例外一直是存在的（但通常為實作時的錯誤而非其他情況）。

+
例外（exceptions）永遠存在，像是 alert 或是同步的 XHR，但好的實作方式就是避開他們。另外要注意個是，例外的例外一直是存在的（但通常為實作時的錯誤而非其他情況）。

diff --git a/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg b/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg
new file mode 100644
index 0000000000..1b57821636
--- /dev/null
+++ b/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg
@@ -0,0 +1 @@
+StackHeapQueueFrameFrameFrameFrameMessageMessageMessageObjectObjectObjectObjectObjectObjectObject
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf