jQueryで処理を遅延実行させる方法を解説！
ボタンをクリックした直後ではなく、数秒待った後で要素が変化してほしいなと思ったことはないでしょうか？このような動作を遅延実行と言います。この記事ではjQueryで処理を遅延実行させる方法をサンプルコード付きで解説しています。
jQueryで処理を遅延実行させたい
WEB制作やWEB開発をしているとボタンをクリックした数秒後経過した後にある要素をフェードインさせたいなどの処理を遅らせる遅延実行を実装したいといったことがよくあります。
遅延実行を使いこなせるようになることでかなり表現の幅を広げることができます。
この記事ではjQueryで処理を遅延実行させる方法をサンプルコードを使って解説していきたいと思います。
jQueryで処理を遅延実行させる方法
早速、jQueryで遅延実行させる方法を解説していきます。
ここでは２つのメソッドを用いて、遅延実行を実現するそれぞれの方法を解説していきたいと思います。
.delay()メソッド
まずは.delay()メソッドを用いた遅延実行させる方法を紹介します。
遅延実行対象の.textセレクタの要素に対してdelayメソッドを指定します。引数には遅延実行させる時間差をミリ秒単位で指定することが出来ます。今回は5000を指定しているので、5秒待つという動作をします。
遅延実行させたい処理は.queue()メソッドの引数として指定するコールバック関数で記述します。
.delay()メソッドの後で.queue()メソッドではなく、他のメソッドをチェーンメソッドとして指定することで上手く遅延実行してくれるメソッドもありますが、addClassメソッドなどは上手く動作してくれません。
.delay()メソッドの後でチェーンメソッドとして.queue()メソッドを実行し、その中で処理を記述してあげることで、.addClass()メソッドなどでも上手く遅延実行を実現することが出来ます。
また、.queue()メソッドのコールバック関数の中では.dequeue()メソッドを使いましょう。
.dequeue()メソッドを使用しないと、そこで処理が止まってしまい２回以上繰り返す遅延実行の場合、上手く動作しなくなってしまいます。
１回限りの遅延実行の場合は、この限りではありません。
setTimeoutメソッド
次にsetTimeoutメソッドを使用した遅延実行させる方法を紹介します。
.delay()メソッドよりこちらの方がシンプルかもしれませんね。
setTimeoutメソッドの第一引数に遅延実行させたい関数を指定します。第二引数には時間差を指定します。
第一引数にはコールバック関数を指定し、.delay()メソッドの時と同様に.textセレクタの要素に対して.text()メソッドで文言を追記します。
第二引数には5000が指定させれていて、5秒後処理が第一引数で指定した関数が実行されるようになります。
まとめ
いかがでしたでしょうか？
これで何秒待つ、その後処理を実行するといったような遅延実行を使いこなせるようになっているのではないでしょうか？
ぜひサンプルコードを参考にして自分で手を動かしてみてください。そうすることで、より理解が深まるでしょう。
【期間限定】全カリキュラム無料で提供中！
Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！
