Chỉnh sửa sự kiện khóa để gọi API khi người dùng đã nhập xong

Question

Tôi có trường mã bưu điện có sự kiện jQuery onKeyup - ý tưởng là khi họ đã nhập đầy đủ mã bưu điện của họ để gọi API mã hóa địa lý của Google Maps để nhận vị trí ngay lập tức dựa trên mã bưu điện này. Mã này hoạt động tuy nhiên tôi muốn tìm một giải pháp lý tưởng không gọi API nhiều lần nhưng chờ và xem liệu người dùng đã nhập xong chưa bằng cách sử dụng một số phương pháp chờ x khoảng thời gian rồi gọi API .

Có ai có thể đề xuất cách tốt nhất để làm điều này không?

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

Bạn có thể sử dụng setTimeout để chỉ thực hiện cuộc gọi sau khi gõ đã ngừng cho 250ms - điều này nói chung là đủ thời gian giữa tổ hợp phím cho phép nhập đầy đủ. Hãy thử điều này:

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

Bạn có thể tinh chỉnh thời gian chờ chính xác để phù hợp hơn với nhu cầu của mình nếu bạn cảm thấy có quá nhiều sự chậm trễ.

Answer 2

Đây là trình trang trí chức năng sẽ trì hoãn sự kiện cho đến lần nhấn phím cuối cùng. Bạn có thể chơi với thời gian trễ để có được cảm giác tốt nhất. 200ms là giá trị tùy ý.

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

Bạn cũng có thể thử sử dụng .blur() thay vì .keyup() trong mã của bạn, nếu bạn đã không cố gắng rồi.