So fügen Sie eine Verzögerung zu einer AJAX-Anforderung hinzu, um Leistungsprobleme zu vermeiden

Question

Ich habe eine Funktion, die eine bestimmte Menge von Daten zurückgibt, die in AJAX ausgelöst werden, wenn Sie eingeben. Jedes Mal wird es zur Oracle DB gehen und die Daten holen und die Ausgabe anzeigen.

Aber sobald ich eine "lange" Zeichenfolge wie "Hallo mein Name ist" eingeben, startet es eine einzige Anfrage jedes Mal, wenn ich einen Schlüssel (10 Anfragen zu einem Zeitpunkt) eingeben und es dauert 5 Sekunden zu bekommen 1 Anfrage Antwort.

Dies verursacht Leistungsproblem in meiner Anwendung. Wie könnte ich das bitte vermeiden?

Ich habe bereits versucht, dynamisch und verzögern, die nicht funktionieren. Ich verwende typeahead 2 (typeahead-bs2.min.js).

$("#customer_description").typeahead({ 

dynamic: true, 
delay: 5000, 
source: function (query, process) { 
     $.ajax({ 
      url: '/data/customer.php', 
      type: 'POST', 
      dataType: 'JSON', 
      //contentType: "text/json; charset=utf-8",       
      data: { 
         all: query, 
        }, 
      success: function(data) { 
       //console.log(data); 
       process(data); 
      } 
     }); 
    } 
}); 

Answer 1

Wenn ich mich nicht irre Sie sagen, dass Sie so etwas wie eine Sucheingabe, die einen Ajax-Aufruf auslöst und Sie möchten, dass Ajax zurück zu halten, damit es nicht für jede Taste auslöst Sie drücken. Habe ich recht?

Etwas wie:

var timeOutId; 
    $("#customer_description").typeahead({ 
     dynamic: true, 
     source: function (query, process) { 
      //if there's no ajax call running (the timeout was cleared)... 
      if (!timeOutId || 'undefined' === typeof timeOutId) { 
       timeOutId = setTimeout(ajaxCall, 300) 
      } 
     } 
    }); 

    function ajaxCall() { 
     $.ajax({ 
      url: '/data/customer.php', 
      type: 'POST', 
      dataType: 'JSON', 
      //contentType: "text/json; charset=utf-8",       
      data: { 
       all: query, 
      }, 
      success: function (data) { 
       //console.log(data); 
       process(data); 
      }, 
      complete: function(){ 
       //when the ajax finishes (success or not) clear the interval 
       clearTimeout(timeOutId); 
      } 
     }); 
    } 

können Sie diesen Code zu verbessern, um eine „statische Klasse“ (ein Objekt mit Funktionen) oder Pseudoklassen zu tun, aber das ist bei Ihnen. Auf diese Weise können Sie das Zeitlimit für ein Flag oder etwas ändern, Sie können einen String-Längen-Check hinzufügen ... oder was immer Sie denken.

Answer 2

Sie können eine Anforderung nach einer Lücke von 1,5/2 Sekunden auslösen, nachdem der Benutzer die Eingabe beendet hat, und prüfen Sie die Eingangslänge, wie von Sami vorgeschlagen.

Damit Sie nicht mehrere Anfragen senden müssen, können Sie die vorherige Anfrage immer abbrechen und eine neue Anfrage senden.

var start = new Date() 
,end, request; 

$('input:text').on('change', function(){ 
    end = new Date(); 
    var input = $(this).val(); 
    var diff = (end - start)/1000; 

    //checking for a 1.5 sec delay and input length 
    //You can adjust the delay time, I have kept it as 1.5seconds 
    if(diff > 1.5 && input.length > 5){ 
    if (request !== undefined){ 
     //aborting the previous request 
     request.abort(); 
    } 
    start = new Date(); 

    //storing the ajax request in a variable so that it can be aborted later when we fire a new request 

    request = $.ajax({ 
     url: '/data/customer.php', 
     type: 'POST', 
     dataType: 'JSON', 
     //contentType: "text/json; charset=utf-8",       
     data: { 
     all: query, 
     }, 
     success: function(data) { 
       //console.log(data); 
       process(data); 
       } 
    }); 
    } 
});