在使用jquery发送新的ajax请求之前添加延迟

我有一个指向html页面的链接列表。

 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

我有一个javascript（jquery），并将html附加到我的文档中。

 var request; $('#item-list a').live('mouseover', function(event) { if (request) request.abort(); request = null; request = $.ajax({ url: $(this).attr('href'), type: 'POST', success: function(data) { $('body').append('
'+ data +'
') } }); }); 

我曾尝试使用setTimeout（）但它不能像我所预期的那样工作。

  var request, timeout; $('#item-list a').live('mouseover', function(event) { timeout = setTimeout(function(){ if (request) request.abort(); request = null; request = $.ajax({ url: $(this).attr('href'), type: 'POST', success: function(data) { $('body').append('
'+ data +'
') } }); }, 2000 ); }); 

在发送新请求之前，如何告诉jquery在hover时等待（500ms或1000ms或…）？

Answer 1

我认为也许不是在中止请求，而是应该在成功/错误函数中使用变量（例如，称为processing=false ）来控制ajax请求，该变量将被重置为false。 然后，如果处理为false，则只能在setTimeout中执行该函数。

就像是：

 var request, timeout; var processing=false; $('#item-list a').live('mouseover', function(event) { timeout = setTimeout(function() { if (!processing) { processing=true; request = $.ajax({ url: $(this).attr('href'), type: 'POST', success: function(data) { processing=false; $('body').append('
'+ data +'
') } }); } }, 2000); }); 

Answer 2

 $.fn.extend( { delayedAjax: function() { setTimeout ($.ajax, 1000 ); } }); $.fn.delayedAjax(); 

似乎工作，但可能不是最漂亮的解决方案。 此外，如果需要，您需要添加一些代码来传递args和超时值

Answer 3

如果你愿意的话，你需要有一个可以作为倒数计时器的变量，一个mouseout事件也会被取消…

 $(function(){ $("#item-list a").live("mouseover",function(){ var a = $(this); a.data("hovering","1"); setTimeout(function(){ if (a.data("hovering") == "1") { // this would actually be your ajax call alert(a.text()); } }, 2000); }); $("#item-list a").live("mouseout",function(){ $(this).data("hovering","0"); }); }); 

Answer 4

这对我有用……

 $(show_id).animate({ opacity: 0 }, 5000, function() { $(show_id).html(data) });