diff --git a/files/ja/web/api/window/clearinterval/index.md b/files/ja/web/api/window/clearinterval/index.md index 94b0ac02997856..7a0d50f33eb7c6 100644 --- a/files/ja/web/api/window/clearinterval/index.md +++ b/files/ja/web/api/window/clearinterval/index.md @@ -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()")}} の呼び出しによって確立された時限繰り返し動作を取り消します。指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。 ## 構文 @@ -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()")}} は交換することができます。 しかし、わかりやすくするために、そうすることは避けるべきです。 ### 返値 @@ -31,7 +30,7 @@ clearInterval(intervalID) ## 例 -[`setInterval()` の例](/ja/docs/Web/API/setInterval#examples)を参照してください。 +例については {{domxref("Window.setInterval", "setInterval()")}} を参照してください。 ## 仕様書 @@ -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()")}} diff --git a/files/ja/web/api/window/cleartimeout/index.md b/files/ja/web/api/window/cleartimeout/index.md index 74f7f1e8ec3f4b..4a4fef97f69242 100644 --- a/files/ja/web/api/window/cleartimeout/index.md +++ b/files/ja/web/api/window/cleartimeout/index.md @@ -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()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。 指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。 @@ -23,7 +23,7 @@ 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()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。 ### 返値 @@ -31,7 +31,7 @@ clearTimeout(timeoutID) ## 例 -ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。1秒後にメッセージがポップアップします。1秒間に複数回ページをクリックしても、アラートは一度しか表示されません。 +ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。1 秒後にメッセージがポップアップします。1 秒間に複数回ページをクリックしても、アラートは一度しか表示されません。 ```js const alarm = { @@ -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()")}} diff --git a/files/ja/web/api/window/setinterval/index.md b/files/ja/web/api/window/setinterval/index.md index ea14589a0f88ec..2a93624815bc47 100644 --- a/files/ja/web/api/window/setinterval/index.md +++ b/files/ja/web/api/window/setinterval/index.md @@ -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()")}} を呼び出して、後でインターバルを削除できます。 ## 構文 @@ -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] @@ -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) の値で呼び出されることがあります。 @@ -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()` のパターンを推奨します。 @@ -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()")}} diff --git a/files/ja/web/api/window/settimeout/index.md b/files/ja/web/api/window/settimeout/index.md index 77bc62ec7d6e59..7e5f5c10b7bec7 100644 --- a/files/ja/web/api/window/settimeout/index.md +++ b/files/ja/web/api/window/settimeout/index.md @@ -1,12 +1,12 @@ --- -title: setTimeout() グローバル関数 +title: "Window: setTimeout() メソッド" +short-title: setTimeout() slug: Web/API/Window/setTimeout -original_slug: Web/API/setTimeout l10n: - sourceCommit: 8acf54a3eb1536134a39896c3ceb1578f9b4eea7 + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} +{{APIRef("HTML DOM")}} グローバルの **`setTimeout()`** メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。 @@ -31,9 +31,9 @@ setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) - : 関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は**推奨しません**。 - `delay` {{optional_inline}} - - : 指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので "直ちに" 実行する、より正確に言えばできるだけ早く実行することを意味します。 + - : 指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので「直ちに」実行する、より正確に言えばできるだけ早く実行することを意味します。 - なお、どちらの場合も、実際の遅延が想定より長くなることがあります。後述する[遅延が指定値より長い理由](#遅延が指定値より長い理由)をご覧ください。 + なお、どちらの場合も、実際の待ち時間が想定より長くなることがあります。後述する[待ち時間が指定値より長い理由](#待ち時間が指定値より長い理由)をご覧ください。 また、値が数値でない場合、暗黙のうちに[型強制](/ja/docs/Glossary/Type_coercion)が行われ、数値に変換されることにも注意してください。これは予期しない、驚くべき結果につながる可能性があります。例として、[delay の値が数値でない場合は暗黙に数値に強制される](#delay_の値が数値でない場合は暗黙に数値に強制される)を参照してください。 @@ -41,33 +41,33 @@ setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) - : タイマーが満了したときに、 `functionRef` で指定された関数に渡す追加の引数です。 -## 返値 +### 返値 -返される `timeoutID` は正の整数値で、 `setTimeout()` を呼び出して作成したタイマーを識別します。この値を {{domxref("clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。 +返される `timeoutID` は正の整数値で、 `setTimeout()` を呼び出して作成したタイマーを識別します。この値を {{domxref("Window.clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。 `timeoutID` の値は、同じオブジェクト(ウィンドウやワーカー)においてタイマーが有効な間、後に `setTimeout()` や `setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。 ## 解説 -タイムアウトは、{{domxref("clearTimeout()")}} を使用して取り消すことができます。 +タイムアウトは、{{domxref("Window.clearTimeout()")}} を使用して取り消すことができます。 -関数を繰り返して(例えば _N_ ミリ秒ごとに)呼び出すには、 {{domxref("setInterval()")}} を使用することを検討してください。 +関数を繰り返して(例えば _N_ ミリ秒ごとに)呼び出すには、 {{domxref("Window.setInterval", "setInterval()")}} を使用することを検討してください。 ### delay の値が数値でない場合は暗黙に数値に強制される -もし `setTimeout()` が呼び出されたときの [_delay_](#delay) 値が数値でなかった場合、暗黙のうちに[型強制](/ja/docs/Glossary/Type_coercion)が行われ、その値を数値に変換します。例えば、以下のコードは _delay_ の値として、数値 `1000` ではなく文字列 `"1000"` を使用しています。しかし、コードが実行されると文字列が数値 `1000` に強制されるため、どのみち動作し、 1 秒後にコードが実行されます。 +もし `setTimeout()` が呼び出されたときの [_delay_](#delay) 値が数値でなかった場合、暗黙のうちに[型変換](/ja/docs/Glossary/Type_coercion)が行われ、その値を数値に変換します。例えば、以下のコードは _delay_ の値として、数値 `1000` ではなく文字列 `"1000"` を使用しています。しかし、コードが実行されると文字列が数値 `1000` に強制されるため、どのみち動作し、 1 秒後にコードが実行されます。 ```js example-bad setTimeout(() => { - console.log("Delayed for 1 second."); + console.log("1 秒待ちました。"); }, "1000"); ``` -しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に変換され、その結果、コードは遅延ゼロで直ちに実行されます。 +しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に変換され、その結果、コードは待ち時間ゼロで直ちに実行されます。 ```js example-bad setTimeout(() => { - console.log("Delayed for 1 second."); + console.log("1 秒待ちました。"); }, "1 second"); ``` @@ -75,7 +75,7 @@ setTimeout(() => { ```js example-good setTimeout(() => { - console.log("Delayed for 1 second."); + console.log("1 秒待ちました。"); }, 1000); ``` @@ -88,20 +88,20 @@ setTimeout(() => { ```js setTimeout(() => { - console.log("this is the first message"); + console.log("これは最初のメッセージです"); }, 5000); setTimeout(() => { - console.log("this is the second message"); + console.log("これは 2 番目のメッセージです"); }, 3000); setTimeout(() => { - console.log("this is the third message"); + console.log("これは 3 番目のメッセージです"); }, 1000); // 出力: -// this is the third message -// this is the second message -// this is the first message +// これは 3 番目のメッセージです +// これは 2 番目のメッセージです +// これは最初のメッセージです ``` 最初の関数は、 2 番目の関数を呼び出す前に 5 秒間の「間」を作らないことに注意してください。その代わり、 1 番目の関数が呼び出されますが、実行されるまで 5 秒間待機します。 1 番目の関数が実行を待っている間に 2 番目の関数が呼び出され、 2 番目の関数が実行される前に 3 秒の待ち時間が適用されます。 1 番目の関数も 2 番目の関数もタイマーが終了していないので、 3 番目の関数が呼び出され、先に実行を完了します。その後、 2 番目の関数が続きます。そして、最後に 1 番目の関数のタイマーが終了した後、 1 番目の関数が実行されます。 @@ -202,15 +202,15 @@ setTimeout(() => { `setTimeout()` に渡した文字列はグローバルコンテキストで評価されます。そのため、`setTimeout()` が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。 -### 遅延が指定値より長い理由 +### 待ち時間が指定値より長い理由 タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。この節では、もっとも一般的な理由を説明します。 #### 入れ子のタイムアウト -[HTML 標準](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers)で指定されているとおり、ブラウザーは `setTimeout` の入れ子になった呼び出しが5回スケジュールされると、最小 4 ミリ秒のタイムアウトを強制します。 +[HTML 標準](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers)で指定されているとおり、ブラウザーは `setTimeout` の入れ子になった呼び出しが 5 回スケジュールされると、最小 4 ミリ秒のタイムアウトを強制します。 -この例では、 `setTimeout` の呼び出しを `0` ミリ秒の遅延でネストし、ハンドラーが呼び出されるたびに遅延時間を記録しています。最初の 4 回は遅延が約 0 ミリ秒、その後は約 4 ミリ秒になります。 +この例では、 `setTimeout` の呼び出しを `0` ミリ秒の待ち時間でネストし、ハンドラーが呼び出されるたびに待ち時間時間を記録しています。最初の 4 回は待ち時間が約 0 ミリ秒、その後は約 4 ミリ秒になります。 ```html @@ -219,7 +219,7 @@ setTimeout(() => {