Settimeout JavaScript関数：例を掲載したガイド

javascriptのsetTimeout関数説明：遅延実行

を実装します

setTimeoutは、指定された遅延（ミリ秒）の後に関数を呼び出したり、コードスニペットを実行したりするために使用されるJavaScriptのネイティブ関数です。これは、ユーザーがしばらくページを参照した後にポップアップウィンドウを表示したり、要素ホバー効果を削除する前に短い遅延を追加したりするなど、多くのシナリオで役立ちます（誤操作を防ぐ）。

キーポイント：

• javascriptのsetTimeout関数により、特定の数ミリ秒の後に関数またはコードスニペットの実行が可能になります。これは、特定のブラウジング時間の後にポップアップを表示するなどのタスクに非常に役立ちます。
• setTimeout関数の参照を最初のパラメーターとして受け入れます。これは、関数名、関数を参照する変数、または匿名関数になります。また、コード文字列を実行することもできますが、読みやすさ、セキュリティ、速度を低下させるため、推奨されません。
• 匿名関数を最初のパラメーターとして使用して、パラメーターをsetTimeoutで実行されたコールバック関数に渡すことができます。ただし、遅延後のパラメーターをリストする代わりに、IE9以下と互換性がありません。
• setTimeoutによって実行されたコードでは、thisの値は、それを呼び出す関数とは異なる実行コンテキストで実行されます。これは、this、ライブラリ関数、または矢印関数を使用して解決できます。 bind
• の返品値は、setTimeout関数と組み合わせてタイマーをキャンセルするために使用できる数値IDです。 clearTimeout

使用の例setTimeout

次のコードブロックは、2秒のタイムアウト（2000ミリ秒）の後にコンソールにメッセージを印刷する簡単な例を示しています。

この概念をより詳細に実証するために、次のデモンストレーションにボタンを2秒クリックした後のポップアップウィンドウが表示されます。（Demoを表示するにはCodepenにアクセスしてください）文法

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

MDNドキュメントによると、

の構文は次のとおりです。

of：

setTimeout

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

は、タイマーをキャンセルするために

と併用できるデジタルIDです。

• は、インターフェイスまたはtimeoutIDインターフェイスを指します。 clearTimeout
• は、タイマーの有効期限が切れた後に実行される機能です。 scope WindowWorkerGlobalScopeは、タイマーの有効期限が切れたときにコンパイルおよび実行される関数の代わりに文字列を含めることができる代替構文です。
• functionRef関数呼び出しを遅らせる必要があるミリ秒数です。省略した場合、デフォルトは0です。
• code、...、
は、
• で指定された関数に渡される他のパラメーターです。 delay
• arg1注：正方形の括弧argNオプションのパラメーターを示します。 functionRef

および[]

構文にwindow.setTimeoutが含まれることがあることがわかります。なぜこれがなぜですか？

ブラウザでコードを実行すると、scopeはグローバルwindowオブジェクトを参照します。 setTimeoutおよびwindow.setTimeout同じ関数を参照してください。唯一の違いは、2番目のステートメントでは、メソッドをsetTimeoutオブジェクトのプロパティと呼びます。 window 私の意見では、これは複雑さを追加しますが、利点は最小限です。最初に見つかり、スコープチェーンで返される別の

メソッドを定義する場合、心配するより大きな問題があるかもしれません。

このチュートリアルでは、setTimeoutを省略しますが、最終的には、どの構文を選択しますか。

windowメソッドの使用例

setTimeoutメソッドは、最初のパラメーターとして関数参照を受け入れます。

これは関数の名前である可能性があります：setTimeout

関数を参照する

変数（関数式）：

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

または匿名関数：

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

上記のように、

>コード文字列を実行するために

に渡すこともできます。

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

ただし、これは次の理由で推奨されません。

setTimeout読みにくい（したがって、維持したり、デバッグするのが難しい）。

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

潜在的なセキュリティリスクである暗黙的な

を使用します。

JSインタープリターを呼び出さなければならないため、代替品よりも遅いです。
• パラメーターをeval
に渡します
• 基本的なシナリオでは、優先されるクロスブラウザーメソッドは、匿名関数を最初のパラメーターとして使用して実行することによって実行されたコールバック関数に引数を渡すことです。

次の例では、

配列からランダムな動物を選択し、このランダムな動物をパラメーターとしてsetTimeout関数として渡します。次に、1秒の遅延で

関数を実行します。

setTimeout

注：通常の関数（）を使用して、配列からランダムな要素を返しました。矢印関数を使用して関数式として書くこともできます：

animals makeTalk setTimeout次のセクションで矢印関数を紹介します。上記のコードを含むCodepenは次のとおりです（出力を表示するにはコンソールを開く必要があります）。 makeTalk

代替方法

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

記事の上部にある構文から、

で実行されたコールバック関数にパラメーターを渡す2番目の方法があることがわかります。これには、遅延後にパラメーターをリストすることが含まれます。 getRandom前の例を参照してください。

残念ながら、これはIE9以下では機能しません。ここでは、パラメーターが

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

として渡されます。残念ながらIE9のサポートが必要な場合は、MDNにポリフィルが提供されます。

キーワードの質問

setTimeout実行されたコードは、それを呼び出す関数とは異なる実行コンテキストで実行されます。これは、thisキーワードのコンテキストが重要な場合に問題になります。

この出力の理由は、最初の例では

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

が

オブジェクトを指し、2番目の例では、グローバルthisオブジェクトを指していることです（dog属性はありません。 ）。 this この問題を解決するには、さまざまな方法があります... window sound値の説明設定

メソッドを使用して新しい関数を作成できます。呼び出されると、そのthisキーワードが提供された値に設定されます（この場合、

オブジェクト）。これにより、

が得られます bind bindユーザーライブラリthis dog多くのライブラリには、この問題を解決するための組み込み関数が付属しています。たとえば、jQueryの

メソッド。関数を受け入れ、常に特定のコンテキストを持つ新しい関数を返します。この場合、それは次のとおりです

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

で矢印関数を使用します

矢印関数がES6に導入されました。それらは、通常の機能の構文よりもはるかに短いです：jQuery.proxy()

もちろん、

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

で使用できますが、1つ注意してください。矢印関数には独自の値がありません。代わりに、囲まれた語彙コンテキストのsetTimeout値を使用します。

通常の関数を使用してください：

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

矢印関数を使用してください：setTimeout this 2番目の例では、グローバルthisオブジェクトを指しています（繰り返しますが、

プロパティはありません）。

これは、

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

で矢印関数を使用すると、トラブルに巻き込まれる可能性があります。私たちは前に

：

で呼ばれる関数の正しい

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

値を提供する方法を見てきました

this導入された方法で矢印関数を使用する場合、これは機能しません。矢印関数には独自の値がないためです。このメソッドは引き続きwindowを記録します。 sound

矢印関数を使用したクリーナーコードの書き込み

ただし、矢印関数には独自の値がないため、利点をもたらすこともできます。 setTimeout setTimeoutこのようなコードを検討してください：this

<code class="language-javascript">function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);</code>

矢印関数を使用して、より簡潔に書き直すことができます：

this undefined矢印関数の始まりを知りたい場合は、「ES6 ARROW関数：JavaScriptの簡潔な構文」を読んでください。

キャンセルタイマーsetTimeout

記事の冒頭で学んだように、

の返品値は、タイマーをキャンセルするためにthis関数と組み合わせて使用​​できる数値IDです。

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

それが実際にどのように機能するか見てみましょう。下のペンでは、[カウントダウン]ボタンをクリックすると、カウントダウンが開始されます。カウントダウンが完了した場合、子猫が勝ちます。ただし、「停止カウントダウン」ボタンを押すと、タイマーが停止してリセットされます。 （カウントダウンがゼロに達したときにクールな効果がない場合、底の右側に埋め込まれたボタンを使用して再実行ペンを使用します。）

要約

この記事では、関数の実行を遅らせるために

を使用する方法を示します。また、パラメーターをsetTimeoutに渡す方法、コールバック関数内のsetTimeout値を維持する方法、およびタイマーをキャンセルする方法も示しました。 this JavaScript関数のFAQ

setTimeout

• javascriptには何がありますか？ setTimeout

  は、JavaScriptの組み込み関数であり、指定された遅延（ミリ秒）の後に関数またはコードセグメントの実行をスケジュールできるようにします。

  setTimeout

• どのように機能しますか？ setTimeout

  関数を呼び出す場合、実行する関数またはコード、およびミリ秒の遅延という2つのパラメーターを提供する必要があります。提供された関数/コードがキューに追加され、指定された遅延の後、実行のためにキューからコールスタックに移動されます。

  setTimeout

• を使用する代替案は何ですか？ setTimeout はい、指定された間隔で関数を繰り返し、よりスムーズなアニメーションとより良いブラウザーパフォーマンス用の新しい

  などの代替案があります。

  setInterval requestAnimationFrame

いつ使用すべきではないのですか
• ？

  setTimeoutは、JavaScriptで非同期コード実行をスケジュールするための便利なツールですが、場合によっては最良の選択ではない場合があります。正確なアニメーションまたはゲームには、

  を使用する必要があります。複数の呼び出しをネストしないでください。

  10ミリ秒未満の遅延の不正確さ。リアルタイムアプリケーション（オンラインマルチプレイヤーゲームや金融取引プラットフォームなど）を構築している場合は、WebSocketsなどのリアルタイムテクノロジーを選択してください。大規模なCPU集約型タスクは、必要に応じてWebワーカーを使用できます。 setTimeout requestAnimationFrame setTimeout setTimeout

操作をキャンセルできますか？

• はい、setTimeout関数を使用して、スケジュールされたタイムアウトをキャンセルできます。パラメーターとしてで返されるタイムアウトIDが必要です。たとえば、

  clearTimeout setTimeout const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);

と
• の違いは何ですか？

  setTimeout指定された遅延後に1回実行する機能をスケジュールしますが、setIntervalは、キャンセルされるかプログラムが停止するまで、指定された間隔で関数を繰り返し実行するようにスケジュールします。

• setTimeoutを使用できる最小遅延値はいくらですか？

  最小遅延値は0です。つまり、機能は現在のスレッドが完了する前に実行されるようにスケジュールされますが、保留中のイベントを処理します。ただし、タイマーの実際の粒度は、ブラウザからブラウザや環境、さまざまなブラウザーまでさまざまです。一部の環境は、10ミリ秒未満の遅延をサポートしていない場合があります。

• setTimeoutnode.jsには何がありますか？

  setTimeoutは、指定された数ミリ秒数で特定の関数またはコードブロックの実行を遅らせるnode.jsの組み込み関数です。

• node.jsでsetTimeoutを使用するにはどうすればよいですか？

  次のようにsetTimeout関数を使用できます。setTimeout(callback, delay);ここで、callbackは、指定されたミリ秒遅延後に実行する関数です。

• node.jsでsetTimeoutを使用するためのベストプラクティスは何ですか？

  いくつかのベストプラクティスには、名前付き関数をコールバックとして使用すること、エラーを優雅に処理すること、予期しない遅延や閉塞を避けるためのイベントループの動作を理解することが含まれます。また、次のイベントループサイクル中にすぐに実行するためにsetImmediateを使用することを検討してください。

（入力テキストにはCodepenへのリンクが含まれているため、Codepenのコンテンツを出力に直接レンダリングすることはできません。記事に記載されているリンクにアクセスして、CodePenデモを表示する必要があります。）

以上がSettimeout JavaScript関数：例を掲載したガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。