jQueryのsetTimeoutを使って実行のタイミングを遅らせる方法【jQuery】

jQueryで一部の処理を遅らせて実行したい時に使用するメソッド「setTimeout」。
使用する時に記述方法が分からず毎回調べてしまう人も多いのではないでしょうか。今回は、そんなsetTimeoutメソッドについて解説していきます。

setTimeoutメソッドの使い方

setTimeoutメソッドの使い方は難しくはありません。以下のように記述する事で使う事ができます。

$(function(){
    setTimeout(function(){
        // 遅延実行したい処理
    }, 3000); // 何ミリ秒後に実行するか
});

上記のように遅延実行したい処理内容と、何ミリ秒後(3秒なら3000、5秒なら5000)に実行したいかの指定をするだけとなります。
例えば、ボタンをクリックされた2秒後にアラートメッセージを出力する場合の処理は以下のようになります。

$(function(){
    $('button').click(function(){
        setTimeout(function(){
            alert('クリックされました');
        }, 2000);
    });
});

実行を遅らせる仕組みとしては単純で、これを利用して画面読み込み後のアニメーションや、要素に変化があった際の遅延実行の変化など、様々な事に利用できます。

setIntervalメソッドとの違いについて

setTimeoutメソッドと似たメソッドとしてsetIntervalメソッドというものもあります。
setTimeoutメソッドは指定した時間の後に1回だけ処理を行いますが、setIntervalメソッドは指定した時間毎に処理(ループ処理)を行います。

記述方法は、以下のようにsetTimeoutメソッドとほとんど同じとなります。

$(function(){
    setInterval(function(){
        // 指定した時間毎に実行したい処理(ループ処理)
    }, 3000);
});

さいごに

いかがでしたでしょうか。
今回は、jQueryのsetTimeoutを使って実行のタイミングを遅らせる方法を解説しました。
setTimeoutメソッドを使用した遅延実行は様々な事に利用できますので、ぜひ使ってみてください。