sugulogの日記

JavaScript、setTimeoutやsetInterval!関数の実行タイミングを制御するメソッドを集めてみた!!

スポンサードリンク

f:id:sugulog:20210729225650p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptと関数制御ということで

  • 関数の実行タイミングを制御するメソッド

について簡単に解説します!!

その為このブログを読むことで、新しい関数の実行タイミングを制御するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです!

また、新しい関数の実行タイミングを制御するJavaScriptメソッドに出会うたびに追記していきます!!

是非最後までご愛読ください。

 

・関数の実行タイミングを制御するJavaScriptメソッド

関数を自分の手のように動かしたい時に動かせるように必死に学習した思い出順なのでご了承ください。 

・cancelAnimationFrame()

引数にrequestAnimationFrame()実行時に戻り値として返されるrequestIDを指定することで、requestIDに該当するrequestAnimationFrame()をキャンセルする。

・clearInterval()

引数にsetInterval()実行時に戻り値として返されるインターバルIDを指定することで、インターバルIDに該当するsetInterval()をキャンセルする。処理回数等を数え、一定回数処理したらキャンセルする場合によく使用する。

・clearTimeout()

引数にsetTimeout()実行時に戻り値として返されるタイマーIDを指定することで、タイマーIDに該当するsetTimeout()をキャンセルする。

・requestAnimationFrame()

ブラウザの再描画の前(一般的には16msの間)に引数で指定した関数を呼び出す。ブラウザの表示を妨げることなく処理が実行されるため、滑らかなアニメーションを作成するのに適している。関数内に記述しその関数を引数に指定することで、関数をループさせることができる。

sugulog.hatenadiary.jp

・setInterval()

第一引数に指定した関数を第二引数で指定したミリ秒数間隔で実行し続ける。関数はthisのスコープの問題上、アロー関数を使用するのが推奨されている。

sugulog.hatenadiary.jp

・setTimeout()

第一引数に指定した関数を第二引数で指定したミリ秒数後に実行する。関数はthisのスコープの問題上、アロー関数を使用するのが推奨されている。

sugulog.hatenadiary.jp

 

以上、今回のブログでした。

新しい関数の実行タイミングを制御するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか??

また新しい知識をどんどん蓄えていきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!