Warten Funktion bis Benutzer aufhört

Question

Eingabe Ich habe Benutzer Ajax-Aufruf zu machen, während Sie tippen. Das Problem ist, dass es den Anruf für jeden Buchstaben macht wird getippt, so dass ich gesetzt Timeout wie folgt aus:

$(input).live('keyup', function(e){ 

setTimeout(function(){ 

var xx = $(input).val(); 
doSearch(xx); 

}, 400); 

}); 

Es ist für 400 ms warten, sondern führt dann für jeden keyup. Wie kann ich das ändern, um den Ajax nur 'einmal' 400ms nach dem letzten getippten Buchstaben aufzurufen?

(I verwendet ‚Verspätung‘ in der Vergangenheit, aber das funktioniert nicht überhaupt mit meinem Skript ...)

Answer 1

timer = 0; 
function mySearch(){ 
    var xx = $(input).val(); 
    doSearch(xx); 
} 
$(input).live('keyup', function(e){ 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(mySearch, 400); 
}); 

ist es besser, Ihre Funktion auf eine benannte Funktion zu bewegen, und es mehrmals aufrufen, denn sonst sind Sie eine weitere Lambda-Funktion auf jedem keyup zu schaffen, die nicht notwendig ist und relativ teuer

Answer 2

Sie müssen den Timer jedes Mal, wenn eine neue Taste gedrückt wird zurückgesetzt, z.B.

(function() { 
    var timer = null; 

    $(input).live('keyup', function(e) { 
     timer = setTimeout(..., 400); 
    }); 

    $(input).live('keydown', function(e) { 
     clearTimeout(timer); 
    }); 
)(); 

Die Funktion Ausdruck wird verwendet, um sicherzustellen, dass der Anwendungsbereich der timer Variable auf diese beiden Funktionen beschränkt ist, die es brauchen.

Answer 3

Ich würde denken, dass Sie konnte delay() wieder in diesem Zusammenhang verwenden, solange Sie sind ok mit dem Hinzufügen eines neuen temporären "Etwas" zum Mix. Würde das für dich funktionieren?

$(input).live('keyup', function(e) { 
    if (!$(input).hasClass("outRunningAJob")) { 
     var xx = $(input).val(); 
     $(input).addClass("outRunningAJob"); 
     doSearch(xx); 
     $(input).delay(400).queue(function() { 
      $(this).removeClass("outRunningAJob"); 
      $(this).dequeue(); 
     }); 
    } 
}); 

Answer 4

Ich fand das folgende einfacher zu implementieren:

$(input).on('keyup', function() { 
    delay(function() { 
     if (input).val() !== '' && $(input).val() !== $(input).attr('searchString')) { 
      // make the AJAX call at this time 
      // Store the value sent so we can compare when JSON returns 
      $(input).attr('searchString', $(input).val()); 

      namepicker2_Search_Prep(input); 
     } 
    }, 500); 
}); 

Durch die aktuelle Zeichenfolge zu speichern Sie in der Lage sind, um zu sehen, dass der Benutzer die Eingabe beendet wurde. Dann können Sie Ihre Funktion sicher aufrufen, um zu tun, was auch immer verarbeitet werden muss.