Ulepszanie zdarzenia keyup wywołania API, gdy pojawi się, gdy użytkownik zakończył wpisywanie:

Question

Mam pole kodu pocztowego, które ma zdarzenie onKeyup w jQuery - chodzi o to, że po pełnym wprowadzeniu kodu pocztowego wywołanie funkcji API geokodujących w Mapach Google w celu uzyskania lokalizacja natychmiast oparta na tym kodzie pocztowym.

Ten kod działa, ale chciałbym znaleźć rozwiązanie, które idealnie nie wywoła API wiele razy, ale poczekaj i zobacz, czy użytkownik zakończył pisanie przy użyciu jakiejś metody czekania na x ilość czasu, a następnie wywołanie API .

Czy ktoś może zaproponować najlepszy sposób na zrobienie tego?

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

Można użyć setTimeout tylko nawiązać połączenie po wpisaniu został zatrzymany przez 250ms - to na ogół dość czasu pomiędzy klawiszy w celu umożliwienia pełnego wpisu. Spróbuj tego:

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

Można dostosować dokładny czas oczekiwania, aby lepiej dostosowane do potrzeb klientów, jeśli czujesz, nie ma zbyt wiele z opóźnieniem.

Answer 2

Oto funkcjonalny dekorator, który opóźni zdarzenie do ostatniego naciśnięcia klawisza. Możesz grać z opóźnieniem, aby uzyskać jak najlepsze wrażenia. 200ms jest dowolną wartością.

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

Można również spróbować użyć .blur() zamiast .keyup() w kodzie, jeśli jeszcze tego nie próbował.