イベント後にjQueryを待機させる方法

Question

AJAXを使用するテキストボックスがいくつかあり、入力中にユーザーが入力したものを処理します。問題は、入力した後に発生するプロセスがかなり負荷がかかることです。とにかく、イベントをもう一度処理する前にイベントを500ミリ秒待たせることができるのですか？つまり、私がaと入力し、次にbsdkeと入力した後、200msと言いましょう。このイベントでは、aが処理されます。aと入力した後、 600msと入力します。イベントは最後のプロセスから500ms後に発生し、absdkeasdfをトリガーして処理します。

さらに、トリガされた前のイベントが完了してからイベントがトリガされないようにする方法はありますか？

可能ですか？確かに最後にタイムアウト機能を張っているのはうまくいきませんよね？

$('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').on('input', function (e) { 
    var url = "/ex.php"; 
    $.ajax ({ 
    //...... 

}); 

Answer 1

setTimeoutを使用：

var timer; 
$('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').on('input', function (e) { 
    var url = "/ex.php"; 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $.ajax ({ 
     //...... 
    }, 500); 
}); 

Answer 2

私は、ロックを使用することをお勧めします。ユーザーが素敵な経験を取得し、オートコンプリート機能を使用しているときに要求でサーバーを溢れさせないように

// global lock 
var locked = false; 
$('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').change(function (e) 
{ 
    if(!locked) 
    { 
     locked = true; 
     $.ajax(......) // ajax here 

     setTimeout(function(){locked = false;}, 500); 
    } 

}); 

Answer 3

これは、チューニングするために、ハードイベントを取得することができます。

私は次のようにします： イベントは、Xミリ秒で動作するのを待ちます。イベントが再び発生し、Xミリ秒が経過していない場合は、遅延を0にリセットします。

これを行う一般的な機能を作りましょう（テストできなかった、壊れている可能性があります） ：

function delayedEvent(eventHandler, delay) { 
    var lastTimeout = null; 

    return function() { 
     var that = this, 
      args= Array.prototype.slice.call(arguments).sort(); 

     if (lastTimeout !== null) 
      window.clearTimeout(lastTimeout); 

     lastTimeout = window.setTimeout(function() { 
      eventHandler.apply(that, args); 
     }, delay); 
    }; 
} 

$('... selector ...').on('event', delayedEvent(function() { ... your code ... }, 500));