Тонкая настройка события keyup для вызова API после его ввода Пользователь завершил ввод

Question

У меня есть поле почтового индекса, в котором есть событие jQuery onKeyup - идея состоит в том, что после того, как они полностью ввели свой почтовый индекс, чтобы вызвать API геокодирования Google Maps, чтобы получить сразу же на основе этого почтового индекса.

Этот код работает, однако я бы хотел найти решение, которое в идеале не будет вызывать API несколько раз, но подождите и посмотрите, закончил ли пользователь ввод текста с использованием некоторого метода ожидания x времени, а затем вызова API ,

Может ли кто-нибудь предложить лучший способ сделать это?

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

Вы можете использовать setTimeout только сделать вызов после ввода остановился на 250мс - это, как правило, достаточно времени между нажатиями клавиш, чтобы позволить полную запись. Попробуйте это:

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

Вы можете настроить точное время ожидания, чтобы лучше удовлетворить ваши потребности, если вы чувствуете, что слишком много задержек.

Answer 2

Вот функциональный декоратор, который задерживает событие до последнего нажатия клавиши. Вы можете играть с временем задержки, чтобы получить лучшее ощущение. 200 мс - произвольное значение.

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

Вы также можете попробовать использовать .blur() вместо .keyup() в коде, если вы еще не пробовали уже.