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

I have a list of links wich point to html pages.

我有指向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>

And i have a javascript(jquery) wich recives and append the html to my document.

我有一个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>')
        }
    });
});

I've tried to work with setTimeout() but it does not work as i aspected.

我尝试使用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
    );
});

How can i tell jquery to wait (500ms or 1000ms or …) on hover before sending the new request?

如何告诉jquery在发送新请求之前等待(500ms或1000ms或…)悬浮?

4 个解决方案

#1

I think that perhaps instead of aborting the request, you should control the ajax requests with a variable, for example, called processing=false, that would be reset to false, in the success/error function. Then you would only execute the function in setTimeout, if processing was false.

我认为您应该使用一个变量来控制ajax请求，例如，processing=false，在success/error函数中，这个变量将被重置为false。然后，如果处理为false，则只执行setTimeout中的函数。

Something like:

喜欢的东西:

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

#2

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

  $.fn.delayedAjax();

Seems to work but probably not the prettiest solution. Also, you need to add some code to pass the args & the timeout val if you want

看起来可行，但可能不是最漂亮的解决方案。此外，如果需要，还需要添加一些代码来传递args和timeout val

#3

You will need to have a variable that can act a countdown timer if you will, that a mouseout event will cancel as well...

您将需要一个变量，可以作为倒计时计时器，如果您愿意，鼠标移出事件也将取消……

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

#4

-2

this works for me...

这适合我…

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

#1