javascript - 无法读取未定义的属性 'abort'

Question

如果输入字段的长度为空，我会尝试取消所有剩余的 AJAX 请求。但是，我看到这个错误:

Uncaught TypeError: Cannot read property 'abort' of undefined

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

这是我看到类似示例的地方，他们使用了request.abort():Stop all active ajax requests in jQuery

Answer 1

您的问题是由于 request 变量的范围引起的。您需要在处理程序之外声明它:

var request;

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

请注意，我稍微修改了 JS 代码，因为如果您要覆盖 html() ，则不需要调用 empty() 。

此外，假设这是一种过滤系统，您可能需要考虑在所有情况下对请求使用abort()，就好像新 key 已被使用一样按下后，之前的请求不再与结果相关，可以结束 - 像这样:

var request;

$("input#enter").keyup(function() {
  var $display = $('#display');
  request && request.abort(); // always abort the previous request, if there was one

  if (this.value.trim().length > 0) {
    request = $.ajax({
      type: "POST",
      url: "getdata.php",
      data: { title: this.value.trim() },
      success: function(data) {
        $display.html(data);
      }
    });
  }
});