Fine-tuning the keyup event to call the API, as soon as it appears, the user has finished entering text

Question

I have a zip code field in which there is a jQuery onKeyup event - the idea is that after they have fully entered their zip code to call the Google Maps geocoding API to immediately get the location based on that zip code.

This code works, however I would like to find a solution that ideally would not call the API several times, but wait and see if the user has finished typing using some kind of wait x time method and then calls the API.

Can anyone suggest a better way to do this?

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

You can use setTimeout only to make a call after printing has stopped for 250 ms - this is usually enough time between keystrokes to allow full recording. Try the following:

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

You can adjust the exact wait time to better suit your needs if you feel that there is too much delay.

Answer 2

Here is a functional decorator that delays the event until the last keystroke. You can play with a delay time to get a better feel. 200ms is an arbitrary value.

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

You can also try using .blur () instead of .keyup () in your code, if you haven't tried it yet.