こんにちは。今回は一定時間後に処理を実行することができる、遅延実行についてご紹介します。

setTimeout・clearTimeout関数

setTimeout関数は一定時間後に処理を実行する時に使用する関数です。
JavaScriptでは、基本的に同期（上から順番に）処理していきますが、明示的に時間をずらして実行したい場合、この関数を利用します。

こちらの例を見てみましょう。
このスクリプトを実行すると、1秒後にコンソール画面に「実行するよ」と表示されます。

setTimeout(function () {
    console.log("実行するよ");
}, 1000);

また、このようにすると繰り返し処理を実行することもできます。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);
}
countUp();

繰り返しsetTimeout関数を使用すると、無限処理になってしまうので、それを止めるためにclearTimeout関数を使用します。

clearTimeout関数は、setTimeout関数で宣言した処理を解除するための関数です。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);

    if (cnt > 4) {
        clearTimeout(timeout);
    }
}
countUp();

このようにclearTimeout関数を使用することで、指定の条件で繰り返し処理を終了することができます。

setInterval・clearInterval関数

先ほど、setTimeout関数で繰り返しの遅延実行を行いましたが似たような関数でsetInterval関数があります。

setInterval関数は、一定時間ごとに処理を実行することができます。

一方、clearInterval関数はsetInterval関数で宣言した処理を解除する関数です。
こちらが使用例になります。
カウントが5になるまで実行し、超えると処理を止めるようにしています。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
}
var interval = setInterval(function () {
    countUp();
    if (cnt > 4) {
        clearInterval(interval);
    }
}, 1000);

setTimeoutとsetIntervalの違い

ぱっと見では、setTimeout関数とsetInterval関数の違いはなさそうですが、時間間隔に少し違いがあります。

・setTimeout関数：処理終了時点から次に実行するタイミングを指定

・setInterval関数：処理開始時点から何秒間隔で実行するかを指定

そのため、setInterval関数では、間隔の秒数を超過した処理が行われた場合、時間の感覚がずれる可能性があります。
用途に応じて、関数を使い分けるのがおすすめです。

まとめ

setTmeout関数では、一定時間後に処理。
setInterval関数では、一定時間毎に処理。

両者の違いは間隔時間の開始時点が異なることをご紹介していきました。
遅延関数を使用したい場合、よく使う関数になると思いますので、参考にしてみてください。

良かったら次回の記事も見てみてくださいね！
それでは、本記事をご覧くださり、ありがとうございました。

投稿 【JQuery】遅延実行でイベントを発生させる方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。