Question

用户点击搜索框
用户输入姓氏
如果texbox lengh超过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毫秒，但您可能需要更长时间，具体取决于数据库和目标受众的效果。

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取消它（）

randn()

JQuery ajax .abort（）

3 个答案: