使用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)脚本，可以接收并将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等待（500毫秒或1000毫秒或...）才发送新请求？

- gearsdigital

---

我想确认一下，您是希望只有用户在链接上悬停超过2秒钟才发出请求吗？ - lonesomeday

Answer 1

我认为，你可以通过控制一个名为processing=false的变量来管理ajax请求，而不是直接中止请求。在成功或错误函数中将该变量重置为false。然后，只有在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);
});

- netadictos

Answer 2

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

  $.fn.delayedAjax();

看起来能够工作，但可能不是最美观的解决方案。此外，如果想要传递参数和超时值，需要添加一些代码。

- jellyfishtree

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

- Goyuix

Answer 4

这对我有效...

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

- Cali

---

感谢您提供建议。我建议您1.进一步解释您的答案2.将其与原始问题联系起来。首先，我很惊讶地看到您使用了jQuery动画 - 您是在暗示必须在UI中进行动画才能实现结果吗？其次，不应该有一个ajax调用吗？ - Jacob Foshee