JavaScriptタイムアウトが1回ではなく3回発生します（clearTimeoutは機能していません）

Question

（キーを押すたびにではなく）入力を一時停止すると、Ajaxアクションが発生します。だから、私はこのようなものを作った：

アイドル状態になってから3秒後にユーザーが入力をやめると、それは実行されます...（しかし、長いフレーズの場合は3回ですが、すべてのkeydown後にタイムアウトをクリアしてから1回）。何が問題ですか ？ jsfiddle上

var timer; 
var interval = 3000; 
$('#inp').keyup(function() { 
    timer = setTimeout(done, interval); 
}); 

$('#inp').keydown(function() { 
    clearTimeout(timer) 
}); 

function done() { 
    console.log('ajax'); 
} 

の作業例： あなたが入力しhttp://jsfiddle.net/vtwVH/

Answer 1

問題はあなたのKeyDownイベントでtimer変数を上書きしているです。

あなたが別のキーを押すのであればTIMOUTはタイムアウトへの参照が失われ、あなたは再びそれをクリアすることはできませんキー

を保持し続ける例えばクリアされる前に。

あなただけ明確にできたこの問題を修正し、本当に遅いのユーザタイプでない限り

var timer; 
var interval = 3000; 


$('#inp').keyup(function(e){ 
    if(timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(done, interval); 

}); 

function done() { 
    console.log('ajax'); 
} 

HERESに取り組んfiddle

Answer 2

、あなたは時々最初に解放する前に、別のキーを押し下げることがあります。特に長いフレーズを入力している場合は、このことに気づかないかもしれません。その場合、イベントの順序はdown up down upではなく、down down up upであり、2つのタイムアウトが設定されます。

（同じイベントハンドラ内で）設定する直前にタイムアウトをクリアする方が一貫しています。

Answer 3

はちょうどあなたが間隔をクリアします

var timer; 
var interval = 3000; 


$('#inp').keyup(function(){ 
    clearTimeout(timer) 
    timer = setTimeout(done, interval); 
}); 

$('#inp').keydown(function(){ 
    clearTimeout(timer) 
}); 

function done() { 
    console.log('ajax'); 
} 

JSFiddle

Answer 4

イベントは、厳密なシーケンシャルのルールに従わないように見えるが、第二のkeydownは最初からkeyupよりも早いので、タイマーを複数回初期化されます。

は、このMODを試してみてください：

$('#inp').keyup(function(){ 
    clearTimeout(timer); 
    timer = setTimeout(done, interval); 
}); 

Answer 5

ようkeyUpイベントにタイマーを設定するには、​​とkeyupが来ることはありませんあなたが思うような順序で。たとえば、2つの​​イベント、次に2つのkeyupイベントを取得できます。それを処理しない場合、2番目のkeyupイベントは別のタイマーを開始し、クリアされないように最初のタイマーへの参照を上書きします。それが実行されている場合は、タイムアウトが実行されている、とkeyupでそれをクリアしているかどうかの

キープトラック：

var timer = null; 
var interval = 3000; 
$('#inp').keyup(function(){ 
    if (timer != null) { 
    window.clearTimeout(timer) 
    } 
    timer = window.setTimeout(done, interval); 
}); 

$('#inp').keydown(function(){ 
    if (timer != null) { 
    window.clearTimeout(timer); 
    timer = null; 
    } 
}); 

function done() { 
    timer = null; 
    console.log('ajax'); 
} 

デモ：http://jsfiddle.net/Guffa/vtwVH/3/