Question

我一直试图规范keyup事件的ajax响应量，以优化性能。基本上我要做的是跟踪当前是否有任何AJAX请求正在进行，如果有，则中止先前的请求，因此只有一个ajax请求最终在任何给定时间完成。我当前的实现似乎没有取消以前的ajax请求。我很欣赏任何关于我做错了什么以及如何解决它的建议。

非常感谢提前！

var ajaxReq = null;

$(".invoice-wrapper").on("keyup", ".prod-name-input", $.throttle(800, function () {
    searchword = $(this).val();

    if ((searchword.length) >= 3) {
        if (ajaxReq != null) ajaxReq.abort();
        var ajaxReq = $.ajax({
            url: "ajax/data.php?searchword=" + searchword,
            dataType: "html",
            success: function (data) {
                $last.next('.suggestions').html(data);
            }
        });
    }
}));

Answer 1

您正在重新定义完整回调中的ajaxReq var，这使得if语句始终为false，这意味着您永远不会中止任何ajax请求。只需在完整回调中移除var中的ajaxReq即可。

/*var */ajaxReq = $.ajax({

Answer 2

尝试

var ajaxReq = null;
$(".invoice-wrapper").on("keyup",
    ".prod-name-input",
    $.throttle(800, function () {
  searchword = $(this).val();
  if ((searchword.length) >= 3) {
    if (ajaxReq === null) {
      ajaxReq = $.ajax({
        url: "ajax/data.php?searchword=" + searchword,
        dataType: "html",
        success: function (data) {
          $last.next('.suggestions').html(data);
          ajaxReq = null;
        }
      });
    }
  }
}));

仅在ajaxReq为null时发送请求的想法。

Answer 3

你的变量“ajaxReq”是一个全局变量，你应该在AJAX成功后再分配“null”，否则，“ajaxReq”就是对象的全部。

success: function (data) {
    $last.next('.suggestions').html(data);
    ajaxReq = null;
 }

Answer 4

试试这个。

if ((searchword.length) >= 3) {
        if (ajaxReq != null) ajaxReq.abort();
        var ajaxReq = $.ajax({
            url: "ajax/data.php?searchword=" + searchword,
            dataType: "html",
            success: function (data) {
                 ajaxReq = null;
                $last.next('.suggestions').html(data);
            },
           error:function(){
                ajaxReq = null;
            }
        });
    }

Keyup ajax请求，中止ajax优化请求

4 个答案: