読者です 読者をやめる 読者になる 読者になる

hogashi.*

日記から何から。

Javascript setTimeoutの再帰

プログラミング Javascript

 再帰的にsetTimeoutを起こすと、イベントが増えに増える仕様のようで、ぎゅんぎゅん処理していて怖かったので覚書をば。

 とりあえずNGソースを。

以下NGソース————–

var timerid;
document.addEventListener("keydown", function(e){
    ...
    hoge();
});
function hoge(){
    timerid = setTimeout("hoge()",1000);
}

以上NGソース————–

 こう書くと、keydownをがんがん起こす(キー押しっぱなしとか)ことで、keydownを起こすのをやめても1000ミリ秒なんかよりずっと短い間隔でhoge()をがんがん回ってしまう。

以下OKソース————–

var timerid;
document.addEventListener("keydown", function(e){
    ...
    hoge();
});
function hoge(){
    clearTimeout(timerid);  // 追加
    timerid = setTimeout("hoge()",1000);
}

以上OKソース————–

 setTimeoutをセットする前に、前回のsetTimeoutをclearTimeoutでクリアする。こうすると、どれだけ短い間隔でkeydownを起こしても、hoge()を1000ミリ秒で回ってくれる。