Jquery 仅执行最后一个ajax请求

我想使用jQueryAjax和php验证一个字段

当我开始点击超过3个字符时，它会将请求发送到php文件，但我的问题是当我点击3个有效字符而第4个无效时，我必须等待执行请求4次

我只想执行最后一个请求并终止另一个挂起的请求

我试过：

xhr = $.ajax(//...);
xhr.abort();

及

但它不起作用

这是我的代码：

// Check validation errors
var minLength = 3;
$('input[name^="data"][type=text]').on('keyup', function(){
    var input = $(this);
    var value = $.trim(input.val());
    var url = input.data('url');
    var div = input.parent();
    var serialized = input.serialize();
    if(value.length >= minLength){
        $.ajax({
            type: 'POST',
            url: url+'.json',
            data: serialized,
            dataType: 'json',
            success: function(data){
                var error = data.error;

                if(error){
                    div.removeClass('valid').addClass('invalid');
                }else{
                    div.removeClass('invalid').addClass('valid');
                }
            }
        });
    }
});

---

如果在一段时间内按下另一个键，请不要发送请求：

var minLength = 3;
var time_out_id=0;
$('input[name^="data"][type=text]').on('keyup', function(){
    var input = $(this);
    var value = $.trim(input.val());
    var url = input.data('url');
    var div = input.parent();
    var serialized = input.serialize();
    if(value.length >= minLength){

        if(time_out_id != 0) clearTimeout(time_out_id);

        time_out_id = setTimeout(function(){

            time_out_id=0;
            $.ajax({
                type: 'POST',
                url: url+'.json',
                data: serialized,
                dataType: 'json',
                success: function(data){
                    var error = data.error;

                    if(error){
                        div.removeClass('valid').addClass('invalid');
                    }else{
                        div.removeClass('invalid').addClass('valid');
                    }
                }

            });

        }, 250);

    }
});

---

自上次按键后250毫秒后，此操作才会发送请求。

您是说此操作不起作用吗

var xhr = null;
// Check validation errors
var minLength = 3;
$('input[name^="data"][type=text]').on('keyup', function(){
    var input = $(this);
    var value = $.trim(input.val());
    var url = input.data('url');
    var div = input.parent();
    var serialized = input.serialize();
    if(value.length >= minLength){
        if (xhr) xhr.abort();           
        xhr = $.ajax({
            type: 'POST',
            url: url+'.json',
            data: serialized,
            dataType: 'json',
            success: function(data){
                // your code ...
                xhr = null;
            }
        });
    }
});

看看Ben Alman的插件

var xhr = null;
// Check validation errors
var minLength = 3;
$('input[name^="data"][type=text]').on('keyup', function(){
    var input = $(this);
    var value = $.trim(input.val());
    var url = input.data('url');
    var div = input.parent();
    var serialized = input.serialize();
    if(value.length >= minLength){
        if (xhr) xhr.abort();           
        xhr = $.ajax({
            type: 'POST',
            url: url+'.json',
            data: serialized,
            dataType: 'json',
            success: function(data){
                // your code ...
                xhr = null;
            }
        });
    }
});