Skip to content

Commit

Permalink
Merge branch 'main' into amplitude
Browse files Browse the repository at this point in the history
  • Loading branch information
Gahotx authored Sep 27, 2024
2 parents 0734874 + 4f43acd commit 0ac8e51
Show file tree
Hide file tree
Showing 14 changed files with 694 additions and 493 deletions.
3 changes: 3 additions & 0 deletions files/ja/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3374,8 +3374,11 @@
/ja/docs/Web/API/isSecureContext /ja/docs/Web/API/Window/isSecureContext
/ja/docs/Web/API/origin /ja/docs/Web/API/Window/origin
/ja/docs/Web/API/performance_property /ja/docs/Web/API/Window/performance
/ja/docs/Web/API/queueMicrotask /ja/docs/Web/API/Window/queueMicrotask
/ja/docs/Web/API/range.intersectsNode /ja/docs/Web/API/Range/intersectsNode
/ja/docs/Web/API/range.setStart /ja/docs/Web/API/Range/setStart
/ja/docs/Web/API/reportError /ja/docs/Web/API/Window/reportError
/ja/docs/Web/API/structuredClone /ja/docs/Web/API/Window/structuredClone
/ja/docs/Web/API/tableRow.insertCell /ja/docs/Web/API/HTMLTableRowElement/insertCell
/ja/docs/Web/API/tableRow.rowIndex /ja/docs/Web/API/HTMLTableRowElement/rowIndex
/ja/docs/Web/API/window.URL /ja/docs/Web/API/URL
Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/api/domtokenlist/item/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ l10n:
**`item()`** は {{domxref("DOMTokenList")}} インターフェイスのメソッドで、リスト内の項目をその位置から取得します。

> [!NOTE]
> このメソッドは[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット表記法)と等価です。
> このメソッドは[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット記法)と等価です。
> したがって、 `aList.item(i)``aList[i]` と同じです。
## 構文
Expand Down
47 changes: 27 additions & 20 deletions files/ja/web/api/setinterval/index.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
---
title: setInterval()
title: setInterval() グローバル関数
short-title: setInterval()
slug: Web/API/setInterval
l10n:
sourceCommit: c8485a8f94319d289a8892fd261d2fe38b623aa0
sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
---

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

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

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

Expand All @@ -19,30 +20,34 @@ setInterval(code, delay)
setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
setInterval(func, delay, arg1)
setInterval(func, delay, arg1, arg2)
setInterval(func, delay, arg1, arg2, /* …, */ argN)
```

### 引数

- `func`
- : `delay` ミリ秒が経過するたびに実行する{{jsxref("function", "関数")}}です。最初の実行は `delay` ミリ秒後に行われます。
- `code`
- : 関数の代わりに文字列を含める構文も許容されており、 `delay` ミリ秒が経過するたびに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は**推奨しません**
- : 関数の代わりに文字列を含める構文も許容されており、 `delay` ミリ秒が経過するたびに文字列をコンパイルして実行します。
この構文は**推奨しません**。{{jsxref("Global_Objects/eval", "eval()")}} の使用にセキュリティ上のリスクがあるのと同じ理由です。
- `delay` {{optional_inline}}
- : 指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば[遅延の制約](#遅延の制約)をご覧ください。
- `arg0, …, argN` {{optional_inline}}
- : 指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。指定されなかった場合の既定値は 0 です。
`delay` 値で許される範囲についての詳細は、[遅延の制約](#遅延の制約)をご覧ください。
- `arg1`, …, `argN` {{optional_inline}}
- : タイマーが満了したときに、 _func_ で指定した関数に渡す追加の引数です。

### 返値

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

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

> [!NOTE]
> 引数 `delay` は、符号付き 32 ビット整数に変換されます。 IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
> 引数 `delay` は、符号付き 32 ビット整数に変換されます。
> IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
##

Expand Down Expand Up @@ -122,7 +127,8 @@ document.getElementById("stop").addEventListener("click", stopTextColor);

## "this" 問題

`setInterval()` に(もっと言うと他のどんな関数でも)メソッドを渡すと、間違った [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値で呼び出されることがあります。この問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#オブジェクトのメソッドとして)で詳しく説明しています。
`setInterval()` に(もっと言うと他のどんな関数でも)メソッドを渡すと、間違った [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値で呼び出されることがあります。
この問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#コールバック)で詳しく説明しています。

### 解説

Expand All @@ -139,10 +145,11 @@ myArray.myMethod(); // "zero,one,two" と表示
myArray.myMethod(1); // "one" と表示
setTimeout(myArray.myMethod, 1000); // "[object Window]" と 1 秒後に表示
setTimeout(myArray.myMethod, 1500, "1"); // "undefined" と 1.5 秒後に表示
// passing the 'this' object with .call won't work

// Passing the 'this' object with .call won't work
// because this will change the value of this inside setTimeout itself
// while we want to change the value of this inside myArray.myMethod
// in fact, it will be an error because setTimeout code expects this to be the window object:
// while we want to change the value of this inside myArray.myMethod.
// In fact, it will be an error because setTimeout code expects this to be the window object:
setTimeout.call(myArray, myArray.myMethod, 2000); // エラー: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 同じエラー
```
Expand Down Expand Up @@ -196,7 +203,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("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("clearInterval()")}}
- {{domxref("window.requestAnimationFrame()")}}
99 changes: 67 additions & 32 deletions files/ja/web/api/settimeout/index.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
---
title: setTimeout()
title: setTimeout() グローバル関数
short-title: setTimeout()
slug: Web/API/setTimeout
l10n:
sourceCommit: c09b8e9dd0022a33cf84355704ca281d6a5f29f5
sourceCommit: 8acf54a3eb1536134a39896c3ceb1578f9b4eea7
---

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

グローバルの **`setTimeout()`** メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。

Expand All @@ -19,7 +20,7 @@ setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
```

### 引数
Expand All @@ -44,11 +45,11 @@ setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)

返される `timeoutID` は正の整数値で、 `setTimeout()` を呼び出して作成したタイマーを識別します。この値を {{domxref("clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。

`timeoutID` の値は、同じオブジェクト (ウィンドウやワーカー) において、後に `setTimeout()``setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。
`timeoutID` の値は、同じオブジェクトウィンドウやワーカー)においてタイマーが有効な間、後に `setTimeout()``setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。

## 解説

タイムアウトは、 {{domxref("clearTimeout()")}} を使用して取り消すことができます。
タイムアウトは、{{domxref("clearTimeout()")}} を使用して取り消すことができます。

関数を繰り返して(例えば _N_ ミリ秒ごとに)呼び出すには、 {{domxref("setInterval()")}} を使用することを検討してください。

Expand All @@ -62,7 +63,7 @@ setTimeout(() => {
}, "1000");
```

しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に強制され、その結果、コードは遅延ゼロで直ちに実行されます。
しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に変換され、その結果、コードは遅延ゼロで直ちに実行されます。

```js example-bad
setTimeout(() => {
Expand Down Expand Up @@ -109,9 +110,9 @@ setTimeout(() => {

### "this" の問題

`setTimeout()` にメソッドを渡すと、 `this` が期待とは異なる値で起動されることがあります。一般的な問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#オブジェクトのメソッドとして)で詳細に説明されています。
`setTimeout()` にメソッドを渡すと、 `this` が期待とは異なる値で起動されることがあります。一般的な問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#コールバック)で詳細に説明されています。

`setTimeout()` によって実行されるコードは、 `setTimeout` が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に `this` キーワードを設定する通常の規則を適用して、呼び出しあるいは `bind``this` を設定しなければ、厳格モードでなければ `global` (または `window`)、厳格モードでは undefined になります。これは、 `setTimeout` が呼び出された関数の `this` 値と同じにはなりません
`setTimeout()` によって実行されるコードは、`setTimeout` が呼び出された関数とは別の実行コンテキストから呼び出されます。呼び出された関数で `this` キーワードを設定する際の通常のルールが適用され、`this` を呼び出し時に設定していない場合、または `bind` で設定していない場合、`window`または `global` )オブジェクトが既定で使用されます。これは、[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)であっても同様です。これは、`setTimeout` を呼び出した関数の `this` の値と同じではありません

以下の例をご覧ください。

Expand Down Expand Up @@ -199,7 +200,7 @@ setTimeout(() => {
}, 500);
```

{{domxref("setTimeout()")}} に渡した文字列はグローバルコンテキストで評価されます。そのため、{{domxref("setTimeout()")}} が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。
`setTimeout()` に渡した文字列はグローバルコンテキストで評価されます。そのため、`setTimeout()` が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。

### 遅延が指定値より長い理由

Expand All @@ -212,20 +213,27 @@ setTimeout(() => {
この例では、 `setTimeout` の呼び出しを `0` ミリ秒の遅延でネストし、ハンドラーが呼び出されるたびに遅延時間を記録しています。最初の 4 回は遅延が約 0 ミリ秒、その後は約 4 ミリ秒になります。

```html
<button id="run">Run</button>
<pre>previous this actual delay</pre>
<div id="log"></div>
<button id="run">実行</button>
<table>
<thead>
<tr>
<th>前回</th>
<th>今回</th>
<th>実際の遅延</th>
</tr>
</thead>
<tbody id="log"></tbody>
</table>
```

```js
let last = 0;
let iterations = 10;

function timeout() {
// log the time of this call
// この呼び出しの時刻をログ出力
logline(new Date().getMilliseconds());

// if we are not finished, schedule the next call
// まだ終わっていない場合は、次の呼び出しをスケジュール
if (iterations-- > 0) {
setTimeout(timeout, 0);
}
Expand All @@ -238,36 +246,47 @@ function run() {
log.removeChild(log.lastElementChild);
}

// initialize iteration count and the starting timestamp
// 反復処理の回数と開始タイムスタンプを初期化
iterations = 10;
last = new Date().getMilliseconds();

// start timer
setTimeout(timeout, 0);
}

function pad(number) {
return number.toString().padStart(3, "0");
}

function logline(now) {
// log the last timestamp, the new timestamp, and the difference
const newLine = document.createElement("pre");
newLine.textContent = `${pad(last)} ${pad(now)} ${
now - last
}`;
document.getElementById("log").appendChild(newLine);
// 最後のタイムスタンプ、新しいタイムスタンプ、および差分をログ出力
const tableBody = document.getElementById("log");
const logRow = tableBody.insertRow();
logRow.insertCell().textContent = last;
logRow.insertCell().textContent = now;
logRow.insertCell().textContent = now - last;
last = now;
}

document.querySelector("#run").addEventListener("click", run);
```

```css hidden
* {
font-family: monospace;
}
th,
td {
padding: 0 10px 0 10px;
text-align: center;
border: 1px solid;
}
table {
border-collapse: collapse;
margin-top: 10px;
}
```

{{EmbedLiveSample("Nested_timeouts", 100, 420)}}

#### アクティブでないタブのタイムアウト

バックグラウンドのタブによる負荷(および関連するバッテリーの使用量)を軽減するために、ブラウザはアクティブでないタブの最小タイムアウト時間を強制します。また、ページがウェブオーディオ API の {{domxref("AudioContext")}} を使用して音声を再生している場合、このタイムアウトが免除されることもあります。
バックグラウンドのタブによる負荷(および関連するバッテリーの使用量)を軽減するために、ブラウザーはアクティブでないタブの最小タイムアウト時間を強制します。また、ページがウェブオーディオ API の {{domxref("AudioContext")}} を使用して音声を再生している場合、このタイムアウトが免除されることもあります。

この仕様はブラウザーに依存します。

Expand All @@ -284,7 +303,8 @@ Firefox は、トラッキングスクリプトとして認識されたスクリ

#### タイムアウトの遅延

ページ(または OS やブラウザー)が他のタスクでビジー状態場合、タイムアウトが予想より遅れて発生することがあります。注意すべき重要なケースとして、 `setTimeout()` を呼び出したスレッドが終了するまで、関数やコードスニペットを実行することができないことがあります。例えば、
ページ(または OS やブラウザー)が他のタスクでビジー状態場合、タイムアウトが予想より遅れて発生することがあります。
注意すべき重要なケースとして、 `setTimeout()` を呼び出したスレッドが終了するまで、関数やコードスニペットを実行することができないことがあります。例えば、

```js
function foo() {
Expand All @@ -296,7 +316,7 @@ console.log("After setTimeout");

このコードは、コンソールへ以下のように出力します。

```
```plain
After setTimeout
foo has been called
```
Expand All @@ -313,7 +333,22 @@ Firefox は現在のタブがロードされている間、 `setTimeout()` タ

### 最大の遅延時間

Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。
ブラウザーは遅延時間を内部的に 32 ビット符号付き整数として格納するため、
2,147,483,647 ミリ秒(約 24.8 日)を超える遅延時間を使用すると、整数オーバーフローが発生します。例えば、次のコードでは、

```js
setTimeout(() => console.log("hi!"), 2 ** 32 - 5000);
```

…タイムアウトが即座に実行される結果となります(`2**32 - 5000` が負の数にオーバーフローするため)。一方、次のコードのようにすると、

```js
setTimeout(() => console.log("hi!"), 2 ** 32 + 5000);
```

…タイムアウトは約5秒後に実行されます。

**メモ**: これは、Node.js の `setTimeout` の動作と一致しません。Node.js では、2,147,483,647 ミリ秒を超えるタイムアウトは即座に実行されます。

##

Expand Down
Loading

0 comments on commit 0ac8e51

Please sign in to comment.