只执行最后一个Ajax请求

问题描述：

我想验证使用jQuery ajax和php的字段。只执行最后一个Ajax请求

当我开始录入多于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'); 
       } 
      } 
     }); 
    } 
});

看看[this throttle/debounce]（http://benalman.com/projects/jquery-throttle-debounce-plugin/）插件来自Ben Alman – Andreas 2013-02-12 20:50:06

答

东西，你可以尝试，不要发送请求，如果其他键被按下的时间内：

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的已经过去，因为过去的按键。

答

你是说这不起作用？

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

只执行最后一个Ajax请求

相关推荐