数秒後に処理を遅らせて実行するsetTimeout()とjQueryのqueue()の扱い方 -『javascript』

table of contents

    アニメーションなど何かの処理を遅らせて実行したいときや、前後関係をもたせたいときにJavaScriptの setTimeout() で実装する場合とJQueryの delay()queue() で実装するときのtipsです。

    数秒後に処理を実行するsetTimeout()とJQueryのqueue()の扱い方

    setTimeout()を使って処理を遅らせる

    JavaScriptのsetTimeout()を使うことで処理を遅らせることができます。setTimeout()は関数と時間を指定して、指定した時間が経過したとき、指定した関数を実行するメソッドです。


    setTimeout(myfunc, time);

    setTimeout(() => { $('.js-late').addClass('active').text('One second later'); }, 1000)

    ちょっと応用として、時間の後に引数を与えると、関数に引数をセットできます。関数を外部化して、引数も配列として与えてみます。


    const addClass = (className, text) => { $('.js-late').addClass('active').text(text); }; const arg = ['active', 'One second later']; setTimeout(addClass, 1000, ...arg);

    JQueryのqueue()を使って処理を遅らせる

    アニメーションの遅延はdelay()で処理できますが、そのあとの処理がaddClass()などだと実行することができません。さらにqueue()を使うことで遅延処理を実行することができます。


    $('.js-late').delay(5000).queue(function(){ $(this).addClass('active').text('Five second later'); });

    sample

    おわります。

    数秒後に処理を遅らせて実行するsetTimeout()とjQueryのqueue()の扱い方 -『javascript』のアイキャッチ画像

    share

    related