Выполнять только последний запрос ajax

Question

Я хочу проверить поле, используя jQuery ajax и php.

Когда я начинаю наклеивать более трех символов, он отправляет запрос в файл php, но моя проблема заключается в том, что я нажимаю 3 допустимых символа, а четвертый недействителен. Я должен дождаться выполнения запроса 4 раза.

Я хочу, чтобы выполнить только последний запрос и убить другого ожидающий запрос

Я пробовал:

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

и

if(typeof xhr !== 'undefined') 
xhr.abort(); 
xhr = $.ajax(//...); 

, но он не работает

Это мой код:

// 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'); 
       } 
      } 
     }); 
    } 
}); 

Answer 1

то, что вы могли бы попробовать, то не послать запрос, если другая клавиша была нажата в течение определенного периода времени:

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мс не имеет прошлое с момента последнего нажатия клавиши.

Answer 2

Вы говорите, что это не работает?

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; 
      } 
     }); 
    } 
});