JavaScript(jQuery)で遅延実行を行う

2020年5月16日

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第１６回目！　

今回はjsで遅延実行する方法をご紹介します。

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

生のJavaScriptで遅延実行する。

さっそくコードを見ていきましょう。まずは生のJavaScriptから！

    
    setTimeout( function() {
      console.log('1.5秒遅れて実行です。');
    }, 1500 );

生のjsで有名なのは、setTimeout()でしょうか。第二引数に時間をセットしてあげます。

続いて、jQueryで遅延実行する方法をご紹介します。

$(window).on('load', function() {
    $('#hogeButton').delay(600).queue(function(){
        $(this).click();
    });
});

ここでは、画面の読み込み完了にhogeButtonが自動でクリックされるサンプル。

queueっていうのは、処理の順番とかに使われる言葉です。キューに溜まっている処理は上から順番に処理されます。プログラミング用語で『待ち行列』、『待ち行列に入れる』という意味らしい。一般的な意味は、人や車の行列、行列に並ぶ、並ばせる、等の意味らしいです。→参考はこちら

イメージとしては、そのキューに処理をぶちこんで、んでもってタイマーをセットして、発火！！って感じですかね。

Harumaki

僕は圧倒的に生のjsの方が好きです。

今回は以上です。　自作Webサービスのアクアリウム専門の質問サイト　　→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。次回もお楽しみに〜。