From 5280e5ea81681d5cb7e0740a696ea890f4d8a2f2 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sat, 5 Oct 2024 08:00:28 +0100 Subject: [PATCH] [zh-tw] sync translated content (#23912) * zh-tw: sync translated content * zh-cn: resolve the global function `setInterval()` ref: mdn/content#36042 --------- Co-authored-by: Allo --- files/zh-tw/_redirects.txt | 3 +- files/zh-tw/_wikihistory.json | 8 ++-- .../move_the_ball/index.md | 2 +- .../accessibility/wai-aria_basics/index.md | 2 +- .../webextensions/content_scripts/index.md | 2 +- .../tutorial/basic_animations/index.md | 42 +++--------------- .../canvas_api/tutorial/basic_usage/index.md | 2 +- .../using_web_workers/index.md | 18 ++++---- .../web/api/{ => window}/setinterval/index.md | 43 +++++++++++-------- 9 files changed, 51 insertions(+), 71 deletions(-) rename files/zh-tw/web/api/{ => window}/setinterval/index.md (90%) diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 846ee0c55e2be0..2fbc58761f777e 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -426,10 +426,11 @@ /zh-TW/docs/Web/API/PositionOptions/timeout /zh-TW/docs/Web/API/Geolocation/getCurrentPosition /zh-TW/docs/Web/API/Web_Video_Text_Tracks_Format /zh-TW/docs/Web/API/WebVTT_API /zh-TW/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages /zh-TW/docs/Web/OpenSearch -/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /zh-TW/docs/Web/API/setInterval +/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /zh-TW/docs/Web/API/Window/setInterval /zh-TW/docs/Web/API/XMLHttpRequest/FormData /zh-TW/docs/Web/API/FormData /zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /zh-TW/docs/Web/API/console/assert /zh-TW/docs/Web/API/console/assert_static +/zh-TW/docs/Web/API/setInterval /zh-TW/docs/Web/API/Window/setInterval /zh-TW/docs/Web/Apps/Progressive /zh-TW/docs/Web/Progressive_web_apps /zh-TW/docs/Web/CSS/-moz-border-image /zh-TW/docs/Web/CSS/border-image /zh-TW/docs/Web/CSS/@viewport /zh-TW/docs/Web/CSS diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 8f4e17cbee4192..45d610933a9f34 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -2379,6 +2379,10 @@ "modified": "2020-10-15T21:58:23.409Z", "contributors": ["iigmir", "EyiLee", "EricPing"] }, + "Web/API/Window/setInterval": { + "modified": "2020-10-15T22:29:07.467Z", + "contributors": ["chrischi0922s"] + }, "Web/API/XMLHttpRequest": { "modified": "2020-10-15T21:21:13.079Z", "contributors": [ @@ -2427,10 +2431,6 @@ "modified": "2020-10-15T22:03:27.482Z", "contributors": ["lin826", "iigmir"] }, - "Web/API/setInterval": { - "modified": "2020-10-15T22:29:07.467Z", - "contributors": ["chrischi0922s"] - }, "Web/Accessibility": { "modified": "2019-09-11T08:39:45.699Z", "contributors": ["SphinxKnight", "iigmir", "boa0332"] diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 2447593176a391..463e6fc42430e2 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -13,7 +13,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ## 定義一個繪製用的迴圈 -為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或是 {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}。 +為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("Window.setInterval()", "setInterval()")}} 或是 {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}。 除了前兩行的 JavaScript，其餘的都刪除，並將以下的程式碼加入在前兩行之後。draw()函數每十毫秒會被 setInterval 執行一次: diff --git a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md index d50549e9006fe4..2ef4398498c04d 100644 --- a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md +++ b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md @@ -205,7 +205,7 @@ WAI-ARIA 添加[角色屬性](https://www.w3.org/TR/wai-aria-1.1/#role_definitio ``` -我們的 JavaScript 透過含有一系列的隨機引言與其作者的 [`XMLHttpRequest`](/zh-TW/docs/Web/API/XMLHttpRequest) `載入一個`JSON 檔案。一旦這些完成，我們就開始 [`setInterval()`](/zh-TW/docs/Web/API/WindowTimers/setInterval) 迴圈每 10 秒載入新的隨機引言到引言框之中。 +我們的 JavaScript 透過含有一系列的隨機引言與其作者的 [`XMLHttpRequest`](/zh-TW/docs/Web/API/XMLHttpRequest) `載入一個`JSON 檔案。一旦這些完成，我們就開始 {{domxref("Window.setInterval", "setInterval()")}} 迴圈每 10 秒載入新的隨機引言到引言框之中。 ```js var intervalID = window.setInterval(showQuote, 10000); diff --git a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md index a4d7a33265fa7f..8a55a3590f9169 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md @@ -444,7 +444,7 @@ In page script, window.x: 1 In page script, window.y: undefined ``` -這些也適用於 [`setTimeout()`](/zh-TW/docs/Web/API/setTimeout)、[`setInterval()`](/zh-TW/docs/Web/API/setInterval)、與 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function)。 +這些也適用於 [`setTimeout()`](/zh-TW/docs/Web/API/setTimeout)、{{domxref("Window.setInterval", "setInterval()")}} 與 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function)。 當在頁面執行程式碼時一定要小一萬個心，頁面的環境有可能被惡意的網頁所控制，它們可以重新定義與你互動的物件來作出一些出乎意料的行爲： diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md index b04d49b49cf498..f310d784282093 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md @@ -28,41 +28,20 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations ### 排程更新 -第一種作法是利用 {{domxref("window.setInterval()")}} 與 {{domxref("window.setTimeout()")}} 方法。 +第一種作法是利用 {{domxref("Window.setInterval")}}、{{domxref("Window.setTimeout()")}} 與 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 函數。 -> [!NOTE] -> 針對新版瀏覽器建議採用 {{domxref("window.requestAnimationFrame()")}} 方法。 - -- `setInterval(function, delay)` - - : 每隔 delay 毫秒，執行輸入 function(函數) -- `setTimeout(function, delay)` - - : 過 delay 毫秒後，執行輸入 function(函數) -- requestAnimationFrame(callback) +- {{domxref("Window.setInterval", "setInterval()")}} + - : 每隔 `delay` 毫秒，執行輸入 `function`。 +- {{domxref("setTimeout()")}} + - : 過 `delay` 毫秒後，執行輸入 `function`。 +- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} - : 告訴瀏覽器你希望執行動畫的時候，要求瀏覽器在重繪下一張畫面之前，呼叫 callback 函數來更新動畫 -如果希望不要有任何的使用者互動影響，請使用 setInterval()，因為它會確實地每隔一段時間就執行程式碼。如果你想製作遊戲，我們能夠使用 keyboard 或是 mouse event 來控制動畫，並使用 setTimeout() 函數一起。藉由設定 EventListeners，我們能夠捕捉任何使用者的動作，並執行我們的動畫函數。 +如果希望不要有任何的使用者互動影響，請使用 `setInterval()`，因為它會確實地每隔一段時間就執行程式碼。如果你想製作遊戲，我們能夠使用 keyboard 或是 mouse event 來控制動畫，並使用 `setTimeout()` 函數一起。藉由設定 EventListeners，我們能夠捕捉任何使用者的動作，並執行我們的動畫函數。 > [!NOTE] > 在下面的範例,我們將使用 **`window.requestAnimationFrame()`** 方法來控制動畫，**`window.requestAnimationFrame()`** 方法為動畫提供更順暢更有效率的方式來執行,當系統準備好繪製畫面時，藉由呼叫動畫 andmation frame() 的 callback 函數。callback 通常每秒鐘執行 60 次，當執行 background tab 時，執行次數會更低，想知道更多關於動畫迴圈(animation loop)的資訊，尤其是遊戲的應用，請查看我們在 [Game development zone](/zh-TW/docs/Games) 的主題 [Anatomy of a video game](/zh-TW/docs/Games/Anatomy)。 -### 從使用者輸入操作控制動畫 - -我們也可以從使用者輸入操作控制動畫，就像是電玩遊戲一般；像是在鍵盤上設置事件處理器 {{domxref("EventListener")}} 捕捉使用者輸入並執行對應動畫。 - -你可以利用我們的[次要版](/zh-TW/docs/DOM/window.setInterval#A_little_framework)或[主要版動畫框架](/zh-TW/docs/JavaScript/Timers/Daemons)。 - -```js -var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity); -``` - -或 - -```js -var myAnimation = new Daemon(null, animateShape, 500, Infinity); -``` - -在後面的範例我們主要將使用 window\.setInterval()方法控制動畫，然後於本頁底部是一些使用 widnow\.setTimeout()的範例連結。 - ## 太陽系動畫 本例會產生一個小型太陽系運行動畫。 @@ -364,11 +343,4 @@ function draw() { - [iGrapher](http://igrapher.com/) - : 股票市場圖 -## See also - -- [JavaScript timers](/zh-TW/docs/JavaScript/Timers) -- [`setInterval` – A little framework](/zh-TW/docs/DOM/window.setInterval#A_little_framework) -- [JavaScript Daemons Management](/zh-TW/docs/JavaScript/Timers/Daemons) -- [HTMLCanvasElement](/zh-TW/docs/DOM/HTMLCanvasElement) - {{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}} diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md index 3640c4a36fed51..9a70c306f4a197 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md @@ -105,7 +105,7 @@ if (canvas.getContext) { ``` -一旦網頁載入完成後，程式碼會呼叫 draw()函數(這是利用 document 上的 load 事件完成)，這類 draw()函數也可以透過{{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}或其他事件處理函數來呼叫，只要呼叫的時間點是在網頁載入完後。 +一旦網頁載入完成後，程式碼會呼叫 `draw()` 函數（這是利用 document 上的 {{domxref("Window/load_event", "load")}} 事件完成），這類 `draw()` 函數也可以透過 {{domxref("window.setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}} 或其他事件處理函數來呼叫，只要呼叫的時間點是在網頁載入完後。 這是我們的範本實際看起來的樣子: diff --git a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md index 6a87b0fc0724f3..7b532f89ba4181 100644 --- a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md +++ b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md @@ -726,22 +726,22 @@ onmessage 事件處理器會接收 worker 回傳的運算結果，然後顯示 大多數 Javascript 的功能 worker 皆可以使用，包含： - {{domxref("Navigator")}} -- {{domxref("XMLHttpRequest")}} -- {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, 與 {{jsxref("Global_Objects/String", "String")}} -- {{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, 與 {{domxref("WindowTimers.setInterval")}} +- {{domxref("WorkerGlobalScope.fetch", "fetch()")}} +- {{jsxref("Global_Objects/Array", "Array")}}、{{jsxref("Global_Objects/Date", "Date")}}、{{jsxref("Global_Objects/Math", "Math")}} 與 {{jsxref("Global_Objects/String", "String")}} +- {{domxref("setTimeout()")}} 與 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} worker 無法操作主頁面的物件與 DOM，如有相關需求，必須要間接透過 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 通知主頁面，讓主頁面執行需求。 > [!NOTE] > 所有 worker 可存取功能一覽表，請見 [Functions and interfaces available to workers](/zh-TW/docs/Web/Reference/Functions_and_classes_available_to_workers). -## 標準規範 +## 規範 {{Specifications}} -## 延伸閱讀 +## 參見 -- [`Worker`](/zh-TW/docs/Web/API/Worker) interface -- [`SharedWorker`](/zh-TW/docs/Web/API/SharedWorker) interface -- [Functions available to workers](/zh-TW/docs/Web/API/Worker/Functions_and_classes_available_to_workers) -- [Advanced concepts and examples](/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers) +- {{domxref("Worker")}} 介面 +- {{domxref("SharedWorker")}} 介面 +- [worker 中可用的函數](/zh-TW/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) +- {{domxref("OffscreenCanvas")}} 介面 diff --git a/files/zh-tw/web/api/setinterval/index.md b/files/zh-tw/web/api/window/setinterval/index.md similarity index 90% rename from files/zh-tw/web/api/setinterval/index.md rename to files/zh-tw/web/api/window/setinterval/index.md index b21dae98fa1199..65f058899e6f7c 100644 --- a/files/zh-tw/web/api/setinterval/index.md +++ b/files/zh-tw/web/api/window/setinterval/index.md @@ -1,17 +1,25 @@ --- -title: setInterval() -slug: Web/API/setInterval +title: Window：setInterval() 方法 +slug: Web/API/Window/setInterval --- {{APIRef("HTML DOM")}} -**`setInterval()`** 函式, {{domxref("Window")}} 與 {{domxref("Worker")}} 介面皆提供此一函式, 此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間. 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續你可以呼叫 {{domxref("clearInterval()")}} 函式移除該間隔程序. 此函式為由 `WindowOrWorkerGlobalScope` 混合定義。 +{{domxref("Window")}} 介面的 **`setInterval()`** 方法作用為重複地執行一個函式呼叫或一個程式碼片斷，每一次執行間隔固定的延遲時間。 -## Syntax +此方法呼叫時將傳回一個間隔 ID 用以識別該間隔程序，因此後續你可以呼叫 {{domxref("Window.clearInterval", "clearInterval()")}} 移除該間隔程序。 -```plain -var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]); -var intervalID = scope.setInterval(code, [delay]); +## 語法 + +```js-nolint +setInterval(code) +setInterval(code, delay) + +setInterval(func) +setInterval(func, delay) +setInterval(func, delay, arg1) +setInterval(func, delay, arg1, arg2) +setInterval(func, delay, arg1, arg2, /* …, */ argN) ``` ### Parameters @@ -30,7 +38,7 @@ var intervalID = scope.setInterval(code, [delay]); ### Return value -The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("clearInterval()")}} to cancel the timeout. +The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("Window.clearInterval", "clearInterval()")}} to cancel the timeout. It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code. @@ -273,7 +281,7 @@ Another, more complex, solution for **the [`this`](/zh-TW/docs/Web/JavaScript/Re ## Usage notes -The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("clearInterval()")}}. +The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("Window.clearInterval", "clearInterval()")}}. If you wish to have your function called _once_ after the specified delay, use {{domxref("setTimeout()")}}. @@ -301,19 +309,18 @@ In these cases, a recursive `setTimeout()` pattern is preferred: In the above snippet, a named function `loop()` is declared and is immediately executed. `loop()` is recursively called inside `setTimeout()` after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing. -## Specifications +## 規範 {{Specifications}} -## Browser compatibility +## 瀏覽器相容性 {{Compat}} -## See also +## 參見 -- [JavaScript timers](/zh-TW/Add-ons/Code_snippets/Timers) -- {{domxref("setTimeout")}} -- {{domxref("clearTimeout")}} -- {{domxref("clearInterval")}} -- {{domxref("window.requestAnimationFrame")}} -- [_Daemons_ management](/zh-TW/Add-ons/Code_snippets/Timers/Daemons) +- [`core-js` 中 `setInterval` 的 polyfill，允許將參數傳遞給回調](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("setTimeout()")}} +- {{domxref("Window.clearInterval()")}} 與 {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} 與 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}