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

【问题标题】：Tweaking on keyup event to call API once it appears user has finished typing调整 keyup 事件以在用户完成输入后调用 API
【发布时间】：2016-04-15 14:24:33
【问题描述】：

我有一个包含 jQuery onKeyup 事件的邮政编码字段 - 其想法是，一旦他们完全输入了邮政编码，就可以调用 Google Maps Geocoding 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);
    }
});

【问题讨论】：

Debounce function in jQuery的可能重复

标签： javascript jquery input user-input client-side

【解决方案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);
});

如果您觉得延迟过多，可以调整确切的超时时间以更好地满足您的需求。

【讨论】：

谢谢 - 这很有效，而且只需要很少的改动！
没问题，很乐意提供帮助。

【解决方案2】：

如果您还没有尝试过，您也可以尝试在代码中使用 .blur() 而不是 .keyup()。

【讨论】：

【解决方案3】：

这是一个函数式装饰器，它将事件延迟到最后一次按键。您可以使用延迟时间来获得最佳感觉。 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">

【讨论】：