jQuery で setTimeout()を使用する

今日の記事では、jQuery の setTimeout() 関数について学習します。

jQuery で setTimeout() を使用する

setTimeout() メソッドは、タイマーの期限が切れると、関数または対象のコードを実行するようにタイマーを設定します。JavaScript の setTimeout() 関数は、その関数または別の JS 関数での特定のアクションまたはコードの実行を延期します。

この関数は、常にミリ秒単位で指定された時間遅延で実行されます。

構文：

setTimeout(code, delay)
setTimeout(functionRef, delay, param1)

1. functionRef は、タイマーの期限が切れた後に完了する関数です。
2. code は、タイマーの期限が切れたときにコンパイルおよび実行される関数の代わりに文字列を挿入できるようにする代替構文です。この構文は、eval() の使用をセキュリティ上の脅威にするのと同じ理由で推奨されません。
3. delay は、必要な機能またはコードを完了する前にタイマーが待機する時間をミリ秒単位で指定するオプションのパラメーターです。このパラメーターを省略すると、値 0 が使用されます。これは、コードがすぐに実行されることを意味します。
4. param1, ... , paramN はオプションのパラメータです。functionRef で定義された関数に渡される追加の引数を指定します。

setTimeout() 関数は、正の整数値である timeoutID を返します。この値は、setTimeout() 関数を呼び出して作成されたタイマーを識別します。タイムアウトをキャンセルするには、このパラメーターを clearTimeout() に渡すことができます。

timeoutID の値は、ウィンドウまたはワーカー内の 1つの要素に対する setTimeout または setInterval への後続の呼び出しによって再利用されないことが保証されています。ただし、他に類を見ないアイテムは、ID の個別のプールを使用します。

この関数はローカル JavaScript で使用されるだけでなく、jQuery で setTimeout() を使用することもできます。モーションを遅らせるには、jQuery コード内で setTimeout() 関数を使用できます。

次の例でそれを理解しましょう：

$(document).ready(function(){
  setTimeout(() => {
    alert("Welcome to DelftStack!");
  }, 2000);
});

上記の例では、setTimeout() を使用して、2000 ミリ秒の間隔でアラートを表示しています。

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

出力：

こちらのデモをご覧ください。