jQuery Ajax-Anruf mehrmals ausgeführt - Chrome-Browser

Question

Ich stoße auf eine Situation in Chrome, wo ein einzelner Ajax-Anruf mehrmals ausgeführt wird (20 Mal, um genau zu sein).

Ich habe ein Eingabefeld, das ausgelöst wird, wenn Sie 5 Ziffern in das zip-Feld eingeben.

Ich versuche, eine Postleitzahl/Statusüberprüfung in meinem Ajax-Anruf durchzuführen.

Ich kreuze Domains.

Der Code funktioniert in Firefox korrekt. Es macht den einzelnen Anruf und führt die richtige Wartung durch (siehe Code). Die Wartung ist nicht wichtig. Es weist einen Titelwert zu oder ändert eine Klasse. Nichts, was dazu führen sollte, dass mein Ajax-Ruf mehrmals ausgeführt wird.

Ich habe meinen Code überprüft. Es wird nicht 20 Mal aufgerufen.

Ich habe Zähler in meinen Code gesetzt, um zu sehen, ob die Funktion mehrmals aufgerufen wird und nur einmal ausgeführt wird.

Der Grund für die onKeyUp und onInput war zu behandeln, wenn jemand in das Feld eingegeben, oder doppelklicken Sie darauf und einen zwischengespeicherten Wert verwendet.

In der Chrome-Version 60.0.3112.113 wird der Ajax-Aufruf also 20 Mal ausgeführt, und am 21. wird er selbst abgebrochen.

Ich benutze auch jQuery anstelle von $ weil es anderen Code gibt, den ich habe keine Kontrolle über.

Alle und alle Hilfe wäre willkommen. Wenn ich etwas vermisse, lass es mich wissen.

Hier ist das Eingabefeld Code:

<input id="zipPostal" name="zipPostal" type="text" placeholder="Postal Code" onkeyup="zipValid1()" oninput="zipValid1()" /> 

Hier ist der jQuery-Code:

 function zipValid1(){ 

     var x = jQuery("#zipPostal").val(); 
     if (x != '00000' && x.length == 5){ 
      jQuery.ajax({ 
       url: 'https://myurl/getzip.cfm', 
       type:'POST', 
       crossDomain:true, 
       data: {zipcode: x}, 
       success: function(data){ 
        if (data.trim() == 'Invalid'){ 
        (perform CSS and JS maintenance) 
        }      
        else{ 
        (perform CSS and JS maintenance) 
        } 
       } // closes Success 
      }); // ajax 
     } 
     else{ 
      (perform CSS and JS maintenance) 
     } 
    }; 

Answer 1

Ihre Funktion zipValid1 auf jedem keyup und Eingabe aufgerufen wird, die bei der Eingabe zweimal für jedes Zeichen genannt wird Sie tippen in die Eingabe ein.

Ein Standardansatz zur Behebung dieses Problems besteht darin, die aufgerufene Funktion zu entprellen, bis der Benutzer die Eingabe beendet hat.

Dies ist eine beliebte jQuery-Bibliothek, um mit diesem Problem zu helfen. http://benalman.com/projects/jquery-throttle-debounce-plugin/

Hier ist ein einfaches Beispiel der Entprellung der Funktion und warten bis 500ms, nachdem der Benutzer die Eingabe beendet hat.

var timeout; 

function zipValid1() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
    var x = jQuery("#zipPostal").val(); 
    if (x != '00000' && x.length == 5) { 
     jQuery.ajax({ 
     url: 'https://myurl/getzip.cfm', 
     type: 'POST', 
     crossDomain: true, 
     data: { 
      zipcode: x 
     }, 
     success: function(data) { 
      if (data.trim() == 'Invalid') { 
       // (perform CSS and JS maintenance) 
      } else { 
       // (perform CSS and JS maintenance) 
      } 
      } // closes Success 
     }); // ajax 
    } else { 
     // (perform CSS and JS maintenance) 
    } 
    }, 500); 
}