setTimeoutの削除【JavaScript】

公開: 2015-05-22 05:48
更新: 2016-04-29 06:03

ボタンを押したら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になんか入っているかどうかで判定します。

ばっちぐー



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。