Tweaking auf KeyUp-Ereignis, um API aufzurufen, sobald der Benutzer

Question

erscheint

Ich habe ein Postleitzahlfeld mit einem jQuery onKeyup -Ereignis - die Idee ist, dass, sobald sie ihre Postleitzahl vollständig eingegeben haben, eine Google Maps Geocoding API zu bekommen Standort sofort basierend auf dieser Postleitzahl.

Dieser Code funktioniert, aber ich würde gerne eine Lösung finden, die im Idealfall die API nicht mehrmals aufrufen wird, aber warten und sehen, ob der Benutzer die Eingabe beendet hat mit einer Methode warten x Zeit und dann die API aufrufen .

Kann jemand den besten Weg vorschlagen, dies zu tun?

$("#txtPostcode").keyup(function() { 
    var postcode = $('#txtPostcode').val().length 
    if (postcode.length >= 5 && postcode.length <= 8) { 
     console.log('length is a valid UK length for a postcode'); 
     // some logic here to run with some way to work out if user has 'finished' typing 
     callGoogleGeocodingAPI(postcode); 
    } 
}); 

Answer 1

können Sie setTimeout verwenden, um nur den Anruf nach Eingabe für 250 ms angehalten hat - dies ist in der Regel genug Zeit zwischen den Tastenanschlägen dem vollen Zugang zu ermöglichen. Versuchen Sie folgendes:

var timer; 
$("#txtPostcode").keyup(function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     var postcode = $('#txtPostcode').val().length 
     if (postcode.length >= 5 && postcode.length <= 8) { 
      console.log('length is a valid UK length for a postcode'); 
      // some logic here to run with some way to work out if user has 'finished' typing 
      callGoogleGeocodingAPI(postcode); 
     } 
    }, 250); 
}); 

Sie können die genaue Timeout zwicken besser an Ihre Bedürfnisse anpassen, wenn Sie glauben, dass es zu viel von einer Verzögerung.

Answer 2

Hier ist ein funktionaler Dekorator, der das Ereignis bis zum letzten Tastendruck verzögert. Sie können mit der Verzögerungszeit spielen, um das beste Gefühl zu bekommen. 200ms ist ein beliebiger Wert.

$("#txtPostcode").keyup(delayEvent(function(e) { 
 
    
 
    console.log('event fired'); 
 
    // this refers to the element clicked, and there is an issue with in the if statement 
 
    // you are checking postcode.length.length which probably throws an error. 
 
    var postcode = $(this).val(); 
 
    if (postcode.length >= 5 && postcode.length <= 8) { 
 
    console.log('length is a valid UK length for a postcode'); 
 

 
    // some logic here to run with some way to work out if user has 'finished' typing 
 
    // callGoogleGeocodingAPI(postcode); 
 
    } 
 
}, 200)); 
 

 
// this is a functional decorator, that curries the delay and callback function 
 
// returning the actual event function that is run by the keyup handler 
 
function delayEvent(fn, delay) { 
 
    var timer = null; 
 
    // this is the actual function that gets run. 
 
    return function(e) { 
 
    var self = this; 
 
    // if the timeout exists clear it 
 
    timer && clearTimeout(timer); 
 
    // set a new timout 
 
    timer = setTimeout(function() { 
 
     return fn.call(self, e); 
 
    }, delay || 200); 
 
    } 
 
}

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="txtPostcode">

Answer 3

Sie auch statt .keyup mit .blur() versuchen können() in Ihrem Code, wenn Sie nicht bereits versucht haben.