jQuery Ajax 调用多次执行 - Chrome 浏览器

Question

我在 Chrome 中遇到了多次执行单个 Ajax 调用（准确地说是 20 次）的情况。

我有一个输入字段，当您在 zip 字段中输入 5 位数字时会触发该字段。

我正在尝试在我的 ajax 调用中执行邮政编码/状态验证。

我正在跨域。

代码在 Firefox 中正确执行。它只进行一次调用，并执行适当的维护。（参见代码）。维护没什么大不了的。它分配一个标题值或更改一个类。没有什么会导致我的 ajax 调用多次执行。

我已经检查了我的代码。它没有被调用 20 次。

我已经在我的代码中放置了计数器，以查看该函数是否被多次调用并且只被调用一次。

onKeyUp 和 onInput 的原因是为了处理是否有人在字段中键入，或者双击它并使用缓存值。

所以在 Chrome 版本 60.0.3112.113 中，Ajax 调用执行了 20 次，并在 21 日自行取消。

我也使用 jQuery 而不是 $，因为我无法控制其他正在使用的代码。

我们将不胜感激。如果我遗漏了什么，请告诉我。

这是输入字段代码：

<input id="zipPostal" name="zipPostal" type="text" placeholder="Postal Code" onkeyup="zipValid1()" oninput="zipValid1()"  />

这里是jquery代码：

        function zipValid1(){

        var x = jQuery("#zipPostal").val();
        if (x != '00000' && x.length == 5){
            jQuery.ajax({
                url: 'https://myurl/getzip.cfm',
                type:'POST',
                crossDomain:true,
                data: {zipcode: x},
                success: function(data){
                    if (data.trim() == 'Invalid'){
                     (perform CSS and JS maintenance)
                    }                       
                    else{
                     (perform CSS and JS maintenance)
                    }
                } // closes Success
            }); // ajax
        }
        else{
           (perform CSS and JS maintenance)
        }
    };

Answer 1

您的函数 zipValid1 在每次按键和输入时都会被调用，在键入时，您在输入中输入的每个字符都会调用两次。

解决此问题的标准方法是“去抖动”调用的函数，直到用户停止输入。

这是一个流行的 jQuery 库来帮助解决这个问题。 http://benalman.com/projects/jquery-throttle-debounce-plugin/

这里是一个简单的例子，在用户停止输入后去抖动函数并等待 500 毫秒。

var timeout;

function zipValid1() {
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    var x = jQuery("#zipPostal").val();
    if (x != '00000' && x.length == 5) {
      jQuery.ajax({
        url: 'https://myurl/getzip.cfm',
        type: 'POST',
        crossDomain: true,
        data: {
          zipcode: x
        },
        success: function(data) {
            if (data.trim() == 'Invalid') {
              // (perform CSS and JS maintenance)
            } else {
              // (perform CSS and JS maintenance)
            }
          } // closes Success
      }); // ajax
    } else {
      // (perform CSS and JS maintenance)
    }
  }, 500);
}