【JQuery】遅延実行でイベントを発生させる方法

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

setTimeout・clearTimeout関数
setInterval・clearInterval関数
setTimeoutとsetIntervalの違い
まとめ

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);