只執行最後一個Ajax請求

Question

我想驗證使用jQuery ajax和php的字段。

當我開始錄入多於3個字符時，它將請求發送到php文件，但是我的問題是當我點擊3個有效字符並且第4個無效時，我必須等待執行請求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); 

    } 
}); 

這不會發送一個請求，直到250ms的已經過去，因爲過去的按鍵。

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