JQuery ajax .abort()

Question

1. 用户单击“搜索”框
2. 用户键入姓氏
3. 如果文本框长度超过2个字符，则调用ajax webservice。

我的问题是数据库速度慢，有成千上万的记录.

我可以输入"mcm“并等待，它将在3秒内返回40个结果。我可以继续输入"mcmil“，它将在1秒内返回11个结果。

问题是，如果我一次从零开始输入"mcmil“，我可以明显地看到前11个结果，然后结果跳到"mcm”和"mcmi“的结果中，大概是因为它们的速度比较慢。

当.keyup触发时，我需要一种方法来检测当前是否正在发出.ajax请求，并在生成新请求之前取消该请求。

$('#employeesearchbox').keyup(function () {

    if ($("#employeesearchbox").val().length > 2) {

        $.ajax({
            type: 'POST',
            url: './webservices/Contacts.asmx/ContactsDirectorySearch',
            data: JSON.stringify({ Surname: $("#employeesearchbox").val() }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                var employees = msg.d;
                $.each(employees, function (index, employee) {
                    $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>");
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.error("The error was: " + xhr.responseText);
            }
        });

    }

});

我看了一下这篇文章：abort-ajax-requests-using-jquery

它直接在.ajax之后取消请求，因为我可能想在下一个键上进行测试，当我添加这段代码时，我会得到“对象未定义”错误--因为这个对象已经不存在了！

请帮帮忙

谢谢

var xhr = $.ajax({
 ...
});

//kill the request
xhr.abort()

Answer 1

关于我的评论-

我会考虑将ajax放入大约半秒钟的setTimeout中，每个新的按键都会清除它。大多数人打字的速度会比这更快。还可以查看这个问题的答案-- Average Inter-Keypress time when typing，也许还可以查看已接受的答案的注释中的链接。

例如-

var delaySearch;
$('#employeesearchbox').keyup(function () {
  if ($("#employeesearchbox").val().length > 2) {
    clearTimeout(delaySearch);
    delaySearch = setTimeout(function() {
      $.ajax({
        type: 'POST',
        url: './webservices/Contacts.asmx/ContactsDirectorySearch',
        data: JSON.stringify({ Surname: $("#employeesearchbox").val() }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
          var employees = msg.d;
          $.each(employees, function (index, employee) {
            $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>");
          });
        },
        error: function (xhr, ajaxOptions, thrownError) {
          console.error("The error was: " + xhr.responseText);
        }
      });
    }, 500);
  }
});

我已经将超时设置为500 to，但是您可能需要更长的时间，这取决于数据库的性能和预期的受众。

Answer 2

沿着这些路线的东西呢？为发送的每个请求创建一个id，将其传递给服务器并从服务器发送回来。只有在请求不太旧的情况下才更新文档。

我仍然认为您应该考虑删除这些请求--基本上，在完成输入或其他操作之前，不要发送300毫秒的请求。

    var requestid = 0;
    $('#employeesearchbox').keyup(function () {

        if ($("#employeesearchbox").val().length > 2) {
            requestid++;
            $.ajax({
                type: 'POST',
                url: './webservices/Contacts.asmx/ContactsDirectorySearch',
                data: JSON.stringify({ Surname: $("#employeesearchbox").val(), requestid: requestid }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                error: function (xhr, ajaxOptions, thrownError) {
                    console.error("The error was: " + xhr.responseText);
                }
            }).done(function(msg){
                if(msg.requestid >= requestid){
                    var employees = msg.d;
                    $.each(employees, function (index, employee) {
                        $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>");
                    });  
                }
            });

        }

    });

Answer 3

感谢@robert，这是工作代码。

在按键后，xhr被解密为null outsite .keyup作用域，我可以检查它是否等于null，然后用.abort()取消它。

var xhr = null;

$('#employeesearchbox').keyup(function () {

    if ($("#employeesearchbox").val().length > 2) {

        if (xhr == null) {
            console.error("null");
        } else {
            //kill the request
            xhr.abort()
        }

        xhr = $.ajax({
            type: 'POST',
            url: './webservices/Contacts.asmx/ContactsDirectorySearch',
            data: JSON.stringify({ Surname: $("#employeesearchbox").val() }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                var employees = msg.d;
                $.each(employees, function (index, employee) {
                    $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>");
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.error("The error was: " + xhr.responseText);
            }
        });

    }

});