调整 keyup 事件以在用户完成输入后调用 API

Question

我有一个邮政编码字段，其中有一个 jQuery onKeyup 事件 - 这个想法是，一旦他们完全输入了他们的邮政编码，就可以调用 Google 地图地理编码 API 来获取立即根据此邮政编码定位。

此代码有效，但我想找到一个理想情况下不会多次调用 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

这是一个函数装饰器，它会将事件延迟到最后一次按键。您可以玩延迟时间以获得最佳感觉。 200ms 是一个任意值。

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

调整 keyup 事件以在用户完成输入后调用 API

Tweaking on keyup event to call API once it appears user has finished typing

javascript

jquery

user-input

input

client-side