Skip to content

Commit

Permalink
2024/10/07 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Oct 12, 2024
1 parent db2de36 commit 6ca5d58
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 81 deletions.
23 changes: 11 additions & 12 deletions files/ja/web/api/window/clearinterval/index.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
---
title: clearInterval()
title: "Window: clearInterval() メソッド"
short-title: clearInterval()
slug: Web/API/Window/clearInterval
original_slug: Web/API/clearInterval
l10n:
sourceCommit: 05d8b0eb3591009b6b7fee274bb7ed1bc5638f18
sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
---

{{APIRef("HTML DOM")}}

グローバルの **`clearInterval()`** メソッドは、以前に {{domxref("setInterval", "setInterval()")}} の呼び出しによって確立されたタイマーを利用した繰り返し動作を取り消します。
指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。
**`clearInterval()`** は {{domxref("Window")}} インターフェイスのメソッドで、以前に {{domxref("Window.setInterval", "setInterval()")}} の呼び出しによって確立された時限繰り返し動作を取り消します。指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。

## 構文

Expand All @@ -20,9 +19,9 @@ clearInterval(intervalID)
### 引数

- `intervalID`
- : 取り消す繰り返し動作の識別子です。この ID は対応する `setInterval()` の呼び出しの返値です。
- : 取り消したい繰り返し動作の識別子です。この ID は対応する `setInterval()` の呼び出しの返値です。

{{domxref("setInterval", "setInterval()")}} と {{domxref("setTimeout", "setTimeout()")}} で使用する ID のプールが共有されていることは注目に値します。つまり、技術的には `clearInterval()` と {{domxref("clearTimeout", "clearTimeout()")}} を交換することができます
{{domxref("Window.setInterval", "setInterval()")}} と {{domxref("Window.setTimeout", "setTimeout()")}} で使用する ID のプールが共有されていることは注目に値します。つまり、技術的には `clearInterval()` と {{domxref("Window.clearTimeout", "clearTimeout()")}} は交換することができます
しかし、わかりやすくするために、そうすることは避けるべきです。

### 返値
Expand All @@ -31,7 +30,7 @@ clearInterval(intervalID)

##

[`setInterval()` の例](/ja/docs/Web/API/setInterval#examples)を参照してください。
例については {{domxref("Window.setInterval", "setInterval()")}} を参照してください。

## 仕様書

Expand All @@ -43,7 +42,7 @@ clearInterval(intervalID)

## 関連情報

- {{domxref("setTimeout")}}
- {{domxref("setInterval")}}
- {{domxref("clearTimeout")}}
- {{domxref("Window.requestAnimationFrame")}}
- {{domxref("Window.setInterval()")}}
- {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("Window.clearTimeout()")}}
- {{domxref("Window.cancelAnimationFrame()")}}
20 changes: 10 additions & 10 deletions files/ja/web/api/window/cleartimeout/index.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: clearTimeout()
title: "Window: clearTimeout() メソッド"
short-title: clearTimeout()
slug: Web/API/Window/clearTimeout
original_slug: Web/API/clearTimeout
l10n:
sourceCommit: da88b2f3a23b9d93f083003f13c06f9d96073f6a
sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
---

{{APIRef("HTML DOM")}}

グローバルの **`clearTimeout()`** メソッドは、 {{domxref("setTimeout()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。
**`clearTimeout()`** {{domxref("Window")}} インターフェイスのメソッドで、{{domxref("Window.setTimeout()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。

指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。

Expand All @@ -23,15 +23,15 @@ clearTimeout(timeoutID)
- `timeoutID`
- : 解除したいタイムアウトの識別子です。この ID は対応する `setTimeout()` から返されたものです。

注目すべきは、 {{domxref("setTimeout()")}} および {{domxref("setInterval()")}} で使用される ID のプールは共有されますので、技術的には `clearTimeout()` および {{domxref("clearInterval()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。
注目すべきは、 {{domxref("Window.setTimeout", "setTimeout()")}} および {{domxref("Window.setInterval", "setInterval()")}} で使用される ID のプールは共有されますので、技術的には `clearTimeout()` および {{domxref("Window.clearInterval", "clearInterval()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。

### 返値

なし ({{jsxref("undefined")}})。

##

ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。1秒後にメッセージがポップアップします。1秒間に複数回ページをクリックしても、アラートは一度しか表示されません。
ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。1 秒後にメッセージがポップアップします。1 秒間に複数回ページをクリックしても、アラートは一度しか表示されません。

```js
const alarm = {
Expand Down Expand Up @@ -75,7 +75,7 @@ window.addEventListener("click", () => alarm.setup());

## 関連情報

- {{domxref("setTimeout()")}}
- {{domxref("setInterval()")}}
- {{domxref("clearInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.setTimeout()")}}
- {{domxref("WorkerGlobalScope.clearTimeout()")}}
- {{domxref("Window.clearInterval()")}}
- {{domxref("Window.cancelAnimationFrame()")}}
38 changes: 18 additions & 20 deletions files/ja/web/api/window/setinterval/index.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title: setInterval() グローバル関数
title: "Window: setInterval() メソッド"
short-title: setInterval()
slug: Web/API/Window/setInterval
original_slug: Web/API/setInterval
l10n:
sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
---

{{APIRef("HTML DOM")}}{{AvailableInWorkers}}
{{APIRef("HTML DOM")}}

**`setInterval()`** メソッドは {{domxref("Window")}} および {{domxref("WorkerGlobalScope")}} インターフェイスで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します
**`setInterval()`** {{domxref("Window")}} インターフェイスのメソッドで、一定の間隔を置いて関数やコードスニペットを繰り返し呼び出します

このメソッド、インターバルを一意に識別するインターバル ID を返します。よって {{domxref("clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。
このメソッド、インターバルを一意に識別するインターバル ID を返します。よって {{domxref("Window.clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。

## 構文

Expand All @@ -34,15 +34,15 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN)
この構文は**推奨しません**。{{jsxref("Global_Objects/eval", "eval()")}} の使用にセキュリティ上のリスクがあるのと同じ理由です。
- `delay` {{optional_inline}}
- : 指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。指定されなかった場合の既定値は 0 です。
`delay` 値で許される範囲についての詳細は、[遅延の制約](#遅延の制約)をご覧ください。
`delay` 値で許される範囲についての詳細は、[待ち時間の制約](#待ち時間の制約)をご覧ください。
- `arg1`, …, `argN` {{optional_inline}}
- : タイマーが満了したときに、 _func_ で指定した関数に渡す追加の引数です。

### 返値

返値 `intervalID` は 0 ではない正の整数値で、 `setInterval()` を呼び出して作成したタイマーを識別します。この値を {{domxref("clearInterval()")}} へ渡せば、インターバルを取り消すことができます。
返値 `intervalID` は 0 ではない正の整数値で、 `setInterval()` を呼び出して作成したタイマーを識別します。この値を {{domxref("Window.clearInterval", "clearInterval()")}} へ渡せば、インターバルを取り消すことができます。

`setInterval()` と {{domxref("setTimeout()")}} は同じ ID プールを共有しており、 `clearInterval()` と {{domxref("clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。
`setInterval()` と {{domxref("Window.setTimeout", "setTimeout()")}} は同じ ID プールを共有しており、 `clearInterval()` と {{domxref("Window.clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。
ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。

> [!NOTE]
Expand Down Expand Up @@ -123,8 +123,6 @@ document.getElementById("stop").addEventListener("click", stopTextColor);

{{EmbedLiveSample("Example_2:_Alternating_two_colors")}}

[`clearInterval()`](/ja/docs/Web/API/clearInterval) も参照してください。

## "this" 問題

`setInterval()` に(もっと言うと他のどんな関数でも)メソッドを渡すと、間違った [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値で呼び出されることがあります。
Expand Down Expand Up @@ -164,19 +162,19 @@ IE に対応する必要がある場合は、[`Function.prototype.bind()`](/ja/d

## 使用上のメモ

`setInterval()` 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。 {{domxref("clearInterval()")}} を使ってインターバルを取り消すことができます。
`setInterval()` 関数は一般に、アニメーションのように何度も実行される関数のために待ち時間を設定するのに使われます。 {{domxref("Window.clearInterval", "clearInterval()")}} を使ってインターバルを取り消すことができます。

指定時間後に*一度*だけ関数を呼び出したい場合には、 {{domxref("setTimeout()")}} を使用してください。
指定時間後に*一度*だけ関数を呼び出したい場合には、 {{domxref("Window.setTimeout", "setTimeout()")}} を使用してください。

### 遅延の制約
### 待ち時間の制約

`setInterval()` のコールバックは順番に `setInterval()` を呼び出し、最初のインターバルがまだ進行中であっても、別のインターバルを開始させることができます。このことがパフォーマンスに与える潜在的な影響を軽減するために、インターバルが 5 レベルを超えてネストされると、ブラウザーは自動的にインターバルの最小値として 4 ミリ秒を強制するようになります。深くネストされた `setInterval()` の呼び出しで 4ms 未満の値を指定しようとすると、 4ms に固定されます。

ブラウザーは、状況によってはさらに厳しい最小間隔値を強制するかもしれませんが、これは一般的なことではありません。また、コールバックの呼び出しの間に経過する実際の時間は、与えられた `delay` よりも長いかもしれないことに注意してください。例については[遅延が指定値より長い理由](/ja/docs/Web/API/setTimeout#遅延が指定値より長い理由)を参照してください。
ブラウザーは、状況によってはさらに厳しい最小間隔値を強制するかもしれませんが、これは一般的なことではありません。また、コールバックの呼び出しの間に経過する実際の時間は、与えられた `delay` よりも長いかもしれないことに注意してください。例については[待ち時間が指定値より長い理由](/ja/docs/Web/API/Window/setTimeout#待ち時間が指定値より長い理由)を参照してください。

### 実行時間をインターバルより確実に短くする

ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、{{domxref("setTimeout()")}} を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために `setInterval()` を使用する場合、ネットワークの遅延やサーバーの応答がないなどさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。
ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、{{domxref("Window.setTimeout", "setTimeout()")}} を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために `setInterval()` を使用する場合、ネットワークの遅延やサーバーの応答がないなどさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。

この場合は、再帰的な `setTimeout()` のパターンを推奨します。

Expand All @@ -203,7 +201,7 @@ IE に対応する必要がある場合は、[`Function.prototype.bind()`](/ja/d
## 関連情報

- [core-js にある `setInterval` のポリフィルで、コールバックに引数を渡すことができるもの](https://github.com/zloirock/core-js#settimeout-and-setinterval)
- {{domxref("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("clearInterval()")}}
- {{domxref("window.requestAnimationFrame()")}}
- {{domxref("Window.clearInterval()")}}
- {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("Window.setTimeout()")}}
- {{domxref("Window.requestAnimationFrame()")}}
Loading

0 comments on commit 6ca5d58

Please sign in to comment.