Question

当用户键入输入字段然后在页面上显示结果时，我正在运行AJAX请求。当用户按退格键删除他们输入的所有内容时，我使用.empty从页面中删除结果。

但是，如果您真的很快按下退格键，结果将从页面中删除，但由于最后一次AJAX查询没有上次执行，该查询的结果会显示!!!

我查看了Abort Ajax requests using jQuery，但这没有帮助，并尝试在return: false;之后添加$("#results").empty();无效。

如果if(this.value.length < 1) {为真时有剩余的AJAX调用，我想在该函数内全部中止它们。

$("input#enter").keyup(function() {
    if(this.value.length < 1) {
        $("#display").empty();
    }else{ 
        $.ajax({
            type: "POST",
            url: "getdata.php",
            data: "title=" + this.value,
            success: function(data) {
                $("#display").empty(); 
                $("#display").html(data);
            }
        });
    } 
});

Answer 1

您可以使用$.active检查$.ajax()来电是否有效，然后再拨打$.ajax()

$("input#enter").keyup(function() {
    if(this.value.length < 1) {
        $("#display").empty();
    }else{ 
      if (!$.active) {
        $.ajax({
            type: "POST",
            url: "getdata.php",
            data: "title=" + this.value,
            success: function(data) {
                $("#display").empty(); 
                $("#display").html(data);
            }
        });
      }
    } 
});

您还可以包括将.ajaxComplete()附加到document，以便在当前通话完成时拨打下一个$.ajax()来电

function request(value) {
  return  $.ajax({
            type: "POST",
            url: "getdata.php",
            data: "title=" + value,
            success: function(data) {
                $("#display").empty(); 
                $("#display").html(data);
            }
        });
}

$("input#enter").keyup(function() {
    if(this.value.length < 1) {
        $("#display").empty();
    }else{ 
      if (!$.active) {
        request(this.value)
      } else {
        $(document).one("ajaxComplete", function() {
          request(this.value)
        })
      }
    } 
});

中止请求的一种方法是使用XMLHttpRequest()，将请求推送到数组，然后在数组的每个元素上调用.abort()

function request(data) {
  let fd = new FormData();
  fd.append("html", data);
  fd.append("delay", Math.floor(Math.random() * 10));
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/echo/html/", true);
  xhr.onload = function() {
    console.log(xhr.responseText);
  }
  xhr.onabort = function() {
    console.log("request " + requests.indexOf(xhr) + " aborted")
  }
  xhr.send(fd);
  return xhr
}

function abortAllRequests() {
  requests.forEach(function(xhr, index) {
    xhr.abort()
  })
}

var requests = [];

requests.push(request(123), request(456));

abortAllRequests();

jsfiddle https://jsfiddle.net/onguym5y/

Answer 2

你谈到中止ajax请求。等到请求返回然后什么都不做就足够了。是的，如果你做了很多大的请求，如果你取消它们可能会提高性能。但这意味着使用jqXhr对象，我个人更喜欢在可能的情况下坚持使用jQuery。

您可以使用变量告诉您#display的最新情况。它将存储发送用于更新它的最后一个ajax请求的时间。如果您收到先前请求的回复，请忽略它。

var lastUpdateTime = 0;

$("input#enter").keyup(function() {
    var now = new Date().getTime();
    if(this.value.length < 1) {
        $("#display").empty();
        lastUpdateTime = now;
    }else{ 
        $.ajax({
            type: "POST",
            url: "getdata.php",
            data: "title=" + this.value,
            success: function(data) {
                if (now < lastUpdateTime) {
                    return;
                }
                $("#display").empty(); 
                $("#display").html(data);
                lastUpdateTime = now;
            }
        });
    } 
});

中止所有剩余的AJAX请求

2 个答案: