入力が開始されたら、ユーザーが入力をやめるまで3秒ごとに入力ボックスをチェックします。

Question

jqueryでのこのような試みがありますが、うまくいかないものがあります。たとえば、 'ff'と入力してから別の2つの 'ff'を追加すると、あまりにも多くのコンソールログが発生します。説明するのは難しいですが、コードや実験を実行するとconsole.logが多すぎます。

$("#search-input").keyup(function() { 
     var thisVal = $(this).val(); 
     if(thisVal!=''){ 
      function checker (v){ 
       if($("#search-input").val() !=v){ 
        setTimeout(function(){checker($("#search-input").val())}, 3000); 
       } 
       else{ 
        console.log($("#search-input").val()); 
       } 
      } 
      setTimeout(function(){checker(thisVal)}, 3000); 

     } 
    }); 

検索入力は入力ボックスです。私は実際にconsole.loggingの代わりにajaxを呼び出すことを計画していますが、もし私が上の作業を得ることができれば、私をうまくやってくれます。

Answer 1

前のタイムアウトは、新しいものを設定する前に、クリアする必要があります。

var timeout; 
$("#search-input").keyup(function() { 
    var thisVal = $(this).val(); 
    if (thisVal) { 
     function checker(v) { 
      if($("#search-input").val() != v){ 
       clearTimeout(timeout); 
       timeout = setTimeout(function() { 
        checker($("#search-input").val()); 
       }, 3000); 
      } else { 
       console.log($("#search-input").val()); 
      } 
     } 
     clearTimeout(timeout); 
     timeout = setTimeout(function(){checker(thisVal)}, 3000); 
    } 
}); 

Answer 2

簡単な方法は、おそらく、ちょうど彼らが一定時間入力を停止するまでチェックを延期維持することです。つまり、タイマーが実行されている場合はそれをクリアし、後でチェックを再スケジュールします。タイマーの有効期限が切れた場合（すなわち、ユーザがスケジュールされた時間内にボックスに入力していない場合）、チェックを実行する。 3秒はおそらくこれのためには長すぎます。あなたは500msくらいかもしれません。

var timer; // external so it's value is held over all instances of the timer function 
$('#search-input').on('keyup',function() { 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(function() { 
     // perform your check 
     console.log($('#search-input').val()); 
    },500); 
});