如何定期触发 AJAX 请求？答案

【问题标题】：How to fire AJAX request Periodically?如何定期触发 AJAX 请求？
【发布时间】：2011-06-30 11:12:57
【问题描述】：

<meta http-equiv="Refresh" Content="5">

此脚本每 5 秒重新加载或刷新一次页面。但我想使用 jQuery 和 AJAX 调用来做到这一点。可能吗？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我试过下面的代码，

    function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

这在指定的时间间隔内没有按预期工作，页面没有完全加载并且函数被连续调用。最好在下面的单独函数中在executeQuery() 之外调用setTimeout(executeQuery, 5000);，

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  updateCall();
}

function updateCall(){
setTimeout(function(){executeQuery()}, 5000);
}

$(document).ready(function() {
  executeQuery();
});

这完全符合预期。

【讨论】：

【解决方案2】：

正如其他人指出的那样，setInterval 和 setTimeout 可以解决问题。我想强调一点我从 Paul Irish 的精彩视频中学到的更高级的技术：http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

对于可能最终花费比重复间隔更长的周期性任务（例如慢速连接上的 HTTP 请求），最好不要使用setInterval()。如果第一个请求尚未完成，而您又开始了另一个请求，那么您最终可能会遇到多个请求消耗共享资源并互相饿死的情况。您可以通过等待安排下一个请求直到最后一个请求完成来避免此问题：

// Use a named immediately-invoked function expression.
(function worker() {
  $.get('ajax/test.html', function(data) {
    // Now that we've completed the request schedule the next one.
    $('.result').html(data);
    setTimeout(worker, 5000);
  });
})();

为简单起见，我使用了成功回调进行调度。不利的一面是一个失败的请求将停止更新。为避免这种情况，您可以改用完整的回调：

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    }
  });
})();

【讨论】：

这不是像递归函数调用吗？如果是的话，那么它可以反复运行很长一段时间，因为它是递归的吗？只要 ajax 继续成功执行，就可以是无限递归的情况
另外，如果你使用 setTimeout，那么有没有办法从这个代码块之外停止这个线程？就像在 setInterval 中一样，您可以简单地调用 clearInterval()。
@RahulDole 这是一个很好的问题，但它不是递归的。它不是直接从工作函数调用的，因此堆栈不会继续增长。对于第二点，请查看 setTimeout() 的文档，您会看到它返回一个可以传递给 clearTimeout() 的数字 id。
@RahulDole 如果您使用 chrome，请使用 console.trace() 查看函数的调用堆栈。由 setTimeout() 调用的函数将有一个非常短的堆栈，它肯定不会包含调用 setTimeout() 的函数。
@Anupal 只是创建一个新问题。

【解决方案3】：

是的，您可以使用 JavaScript setTimeout() 方法或 setInterval() 方法来调用您想要运行的代码。以下是使用 setTimeout 的方法：

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

【讨论】：

只使用 setTimeout(executeQuery, 5000);而不是 setTimeout('executeQuery()', 5000); - 它更短更快。

【解决方案4】：

您可以使用setTimeout 或setInterval。

区别在于—— setTimeout 只触发一次你的函数，然后你必须再次设置它。 setInterval 不断触发表达式，除非你告诉它停止

【讨论】：