setTimeoutの削除【JavaScript】

ボタンを押したら3秒後にアラートを出すなんてブロックを用意します。

ボタン1

コードはこんな感じ。jQuery使ってます。

$(‘#btn’).click(function(){
        setTimeout(function(){
                alert(‘あっきぃだよ！’);
        }, 1000 * 3);
});

setTimeoutで3秒後にアラートだぜ。いい感じだぜ。と思いきや、
これだとボタンを連打すると、その数だけアラートが出てしまいます。

それは良くないことが起こりそうなので、clearTimeoutで連打を阻止しましょう。

var timer;
$(‘#btn’).click(function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
                alert(‘あっきぃだよ！’);
        }, 1000 * 3);
});

ボタン2

これで最後にボタンを押してから3秒後にアラートになります。

もしも、
最初にボタンを押してから3秒後にアラートにしたい場合は、こんな感じに。

var timer;
$(‘#btn’).click(function(){
        if(!timer) {
                timer = setTimeout(function(){
                        alert(‘あっきぃだよ！’);
                        timer = null;
                }, 1000 * 3);
        }
});

ボタン3

timerになんか入っているかどうかで判定します。

ばっちぐー