Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-tw] sync translated content #23912

Merged
merged 2 commits into from
Oct 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion files/zh-tw/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions files/zh-tw/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down Expand Up @@ -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"]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 執行一次:

Expand Down
2 changes: 1 addition & 1 deletion files/zh-tw/learn/accessibility/wai-aria_basics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ WAI-ARIA 添加[角色屬性](https://www.w3.org/TR/wai-aria-1.1/#role_definitio
</section>
```

我們的 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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)。

當在頁面執行程式碼時一定要小一萬個心,頁面的環境有可能被惡意的網頁所控制,它們可以重新定義與你互動的物件來作出一些出乎意料的行爲:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()的範例連結。

## 太陽系動畫

本例會產生一個小型太陽系運行動畫。
Expand Down Expand Up @@ -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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ if (canvas.getContext) {
</html>
```

一旦網頁載入完成後,程式碼會呼叫 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()")}} 或其他事件處理函數來呼叫,只要呼叫的時間點是在網頁載入完後。

這是我們的範本實際看起來的樣子:

Expand Down
18 changes: 9 additions & 9 deletions files/zh-tw/web/api/web_workers_api/using_web_workers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")}} 介面
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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.

Expand Down Expand Up @@ -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()")}}.

Expand Down Expand Up @@ -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()")}}