php - 发出新请求时停止以前的ajax

Question

我有一个脚本

$('#postinput').on('keyup',function(){ 
    var txt=$(this).val();

    $.ajax({
       type: "POST",
       url: "action.php",
       data: 'txt='+txt,
       cache: false,
       context:this,
       success: function(html)
       {
           alert(html);
       }

   });

});

假设有人输入一个，ajax 运行。他立即输入 b c 等等。 Ajax 每次都运行。有没有办法在发出新请求时停止以前的请求？

Answer 1

您可以使用xhr 的abort() 方法。试试这个:

var currentXhr;
$('#postinput').on('keyup',function(){ 
    currentXhr && currentXhr.readyState != 4 && currentXhr.abort(); // clear previous request

    var txt = $(this).val();
    var currentXhr = $.ajax({
        type: "POST",
        url: "action.php",
        data: 'txt=' + txt,
        cache: false,
        context:this,
        success: function(html) {
            alert(html);
        }
    });
});

如果不想使用全局变量，可以将 xhr 存储在 #postinput 的 data-* 属性中> 元素。

另一种方法是仅在用户停止输入时触发 AJAX 请求:

var timer;
$('#postinput').on('keyup',function(){ 
    clearTimeout(timer);

    var txt = $(this).val();
    var timer = setTimeout(function() {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: 'txt=' + txt,
            cache: false,
            context:this,
            success: function(html) {
                alert(html);
            }
        });
    }, 100); // sends request 100ms after typing stops.
});