11

ユーザーが入力を一時停止したときに（キーを押すたびにではなく）、ajaxアクションを起動したい。だから私はこのようなものを作りました：

ユーザーがアイドル状態になってから 3 秒後に入力を停止すると、機能が実行されます... (しかし、長いフレーズの場合はなぜ 3 回なのか - キーダウンごとにタイムアウトをクリアするため、1 回だけ実行されると予想されます)。何が問題ですか ？

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

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

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

jsfiddle での作業例: http://jsfiddle.net/vtwVH/

4

5 に答える 5

9

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

タイムアウトを設定する直前に (同じイベント ハンドラーで) クリアする方が一貫性があります。

于 2013-02-01T13:01:57.980 に答える
7

timer問題は、keydown イベントで変数を上書きしていることです。

したがって、タイムアウトがクリアされる前に別のキーを押すと、たとえばキーを押し続けます

timeOut への参照は失われ、再度クリアすることはできません。

keyUpこれを修正するには、次のようにイベントでタイマーをクリアして設定するだけです

var timer; 
var interval = 3000; 


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

}); 

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

Heres 作業フィドル

于 2013-02-01T13:08:07.603 に答える
1

イベントは厳密なシーケンシャル ルールに従っていないようです。2 回目のキーダウンは最初のキーアップよりも早く発生するため、タイマーが複数回初期化されます。

このモッドを試してください:

$('#inp').keyup(function(){
  clearTimeout(timer);
  timer = setTimeout(done, interval); 
});
于 2013-02-01T13:04:52.553 に答える
0

ユーザーの入力が本当に遅い場合を除いて、keydownとkeyupは思った順序で表示されません。たとえば、2つのkeydownイベントの後に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/

于 2013-02-01T13:11:04.120 に答える
0

間隔をクリアしてください：

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

于 2013-02-01T13:03:26.560 に答える