在使用jquery發送新的ajax請求之前添加延遲

Question

我有一個指向html頁面的鏈接列表。

<ul id="item-list"> 
    <li><a href="assets/data/item1.html">Item 1</a></li> 
    <li><a href="assets/data/item2.html">Item 2</a></li> 
    <li><a href="assets/data/item3.html">Item 3</a></li> 
    <li><a href="assets/data/item3.html">Item 4</a></li> 
</ul> 

而我有一個JavaScript（jQuery的）至極recives和追加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('<div>'+ data +'</div>') 
     } 
    }); 
}); 

我試着使用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('<div>'+ data +'</div>') 
      } 
      }); 
     }, 2000 
    ); 
}); 

如何告訴jquery在發送新請求之前等待（500ms或1000ms或...）懸停？

Answer 1

我認爲，也許不是中止請求，你應該控制與可變Ajax請求，例如，被稱爲processing=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('<div>'+ data +'</div>') 
     } 
     }); 
    } 
    }, 2000); 
}); 

Answer 2

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

    $.fn.delayedAjax(); 

似乎工作，但可能不是最漂亮的解決方案。此外，你需要添加一些代碼來通過參數&超時val如果你想

Answer 3

你將需要一個變量，可以作爲一個倒數計時器，如果你願意，一個鼠標事件將取消以及.. 。

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