jquery - 使用 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 毫秒或...)，然后再发送新请求？

Answer 1

我认为也许您不应该中止请求，而应该使用变量控制ajax请求，例如，名为processing=false，该变量将重置为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('<div>'+ data +'</div>')
        }
      });
    }
  }, 2000);
});