Wie mache ich jQuery warten nach Ereignis

Question

Ich habe einige Textfelder, die AJAX verwendet und verarbeiten, was der Benutzer während der Eingabe eingibt. Das Problem ist, dass der Prozess, der nach dem Eingeben passiert, ein ziemlich geladener Prozess ist. Gibt es trotzdem, dass ich das Ereignis 500 ms warten kann, bevor es das Ereignis erneut verarbeiten wird? Nehmen wir an, ich tippe a und dann 200ms, nachdem ich bsdke eingegeben habe. Das Ereignis verarbeitet nur a, das hereinkommt. Sagen wir, dass ich dann asdf 600ms schreibe, nachdem ich a tippte. Das Ereignis wird dann absdkeasdf auslösen und verarbeiten, weil es 500ms nach dem letzten Prozess war.

Oder sogar, gibt es eine Möglichkeit, ich kann das Ereignis ausgelöst werden, bis das vorherige Ereignis, das ausgelöst wurde, beendet hat, was es getan hat?

Ist es möglich? Sicherlich wird es am Ende nicht funktionieren, eine Timeout-Funktion anzubringen, oder?

$('#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

Verwendung 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

würde ich empfehlen, eine Sperre verwenden.

// 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

Es kann das Ereignis schwer abzustimmen erhalten, so dass der Anwender eine schöne Erfahrung bekommt und Sie nicht den Server mit Anfragen überfluten, wenn die automatischen Vervollständigung Funktionen.

Ich würde es so machen: Das Ereignis wird X Millisekunden warten, um selbst zu laufen. Wenn das Ereignis erneut ausgelöst wird und die X-Millisekunden nicht verstrichen sind, setzen Sie die Verzögerung auf 0.

Lassen Sie uns cool sein und eine generische Funktion dazu machen (könnte es nicht testen, könnte es kaputt sein) :

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));