Question

我在keydown上有这个活动：

$.post("search.php", { s: $('#box_s').val()},
               function(data) {
                  /**/
               }
});

问题在于尽可能多的keydown请求和有时更旧的请求会覆盖最近的请求结果

所以我需要

$('input#box_s').keydown(function(){
     abort_previous_post();
     $.post("search.php", { s: $('#box_s').val()},
                   function(data) {
                      /**/
                   }
    });
});

是可以的吗？

Answer 1

您可以对其进行限制，以便在用户停止输入x毫秒之前不会发出请求。 250-400ms似乎是一个很好的价值：

function throttle( fn, time ) {
    var timer = 0;

    return function() {
        window.clearTimeout( timer );
        var self = this,
            args = [].slice.call( arguments );


        timer = setTimeout( function() {
            return fn.apply( self, args );
        }, time );
    };

}

用法：

$('input#box_s').keydown( throttle( function(){

     $.post("search.php", { s: $('#box_s').val()},
                   function(data) {
                      /**/
                   }
    });
}, 400 ) );

在这种情况下，在用户开始输入后发出请求，然后停止400ms。

Answer 2

我接近这样的事情：

var requestCount = 0;

$('input#box_s').keydown(function(){
     requestCount++;
     var thisRequestCount = requestCount;
     $.post("search.php", { ingredientes_s: $('#box_s').val()},
                   function(data) {
                      if(thisRequestCount!=requestCount) return;
                      /**/
                   }
    });
});

Answer 3

除非出现轻微延迟，否则您要做的不是启动请求：

var timeoutID;
$('#box_s').keydown(function () {
    clearTimeout(timeoutID);
    timeoutID = setTimeout(function () {
        $.post("search.php", { ingredientes_s: $('#box_s').val()}, function(data) {
            /** **/
        });
     }, 500);
});

检查this jsFiddle是否有演示。

Answer 4

post调用只是Ajax处理程序的一个conince方法，因此捕获xhr并中止它。

var jqxhr;

$('input#box_s').keydown(function(){
     if (jqxhr) jqxhr.abort();
     $.post("search.php", { ingredientes_s: $('#box_s').val()},
                   function(data) {
                      /**/
                   }
    });
});

如何中止$ .post请求

4 个答案: