webmanab.html

menu

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

 

demo

アニメーションなど何かの処理を遅らせて実行したいときや、前後関係をもたせたいときに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

tip