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会在每个键盘和输入上被调用，在输入时会为您输入的每个字符调用两次。

解决此问题的标准方法是去抖动＆＃34;在用户停止输入之前调用该函数。

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

这是一个简单的例子，用于去除函数并等待用户停止输入后的500ms。

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

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

1 个答案: