Javascript:10秒后调用函数，然后每1分钟调用一次

Javascript: Call function after 10 seconds, then each 1 minute

本文关键字：调用 1分钟 一次 然后 10秒 函数 Javascript      更新时间：2023-09-26

我有以下场景：

我有一个javascript ajax函数loadCars()，需要在页面加载后10秒调用，然后每60秒调用一次。

以下是我迄今为止所尝试的：

setTimeout(function(){setInterval(function(){loadCars()}, 60000)}, 10000);

发生的情况是，函数在10秒钟后被调用，但再也没有调用过，我缺少什么？

您需要在setTimeout和setInterval上调用loadCars。

setTimeout(function() {
    console.log('first 10 secs');
    // loadCars();
  
    setInterval(function() {
          console.log('60 secs has passed');
          // loadCars();
    }, 60000);
}, 10000);
console.log('page loaded');

我不同意给出的答案，因为他们使用了setInterval或者没有等待ajax调用完成。IMO您应该只在函数loadcars（和ajax调用）完成时设置一个新的超时。

示例：

function loadCars () {
  // ajax call happens here
  $.ajax()
    .then(function(){
      // call the function here
      setTimeout(function(){
        loadCars();
      // wait a minute after you recieved the data
      }, 60000)
    })
}
// wait 10 seconds
setTimeout(function(){
  loadCars();
}, 10000)

这样做的好处是，它只会在HTTP请求完成时开始设置新的超时，并防止函数失去同步。如果您将setinterval与ajax调用结合使用，那么下一个ajax调用将在60秒内发生，即使当前调用延迟了10秒（您不希望这样）。

您可以在loadCars()方法中调用setTimeout(loadCars, 60000)，就像您最初用setTimeout 10秒调用它一次一样，然后从那时起，它每次执行时都会设置1分钟的超时。。。

function loadCars()
{
    //code
    setTimeout(loadCars, 60000);
}
setTimeout(loadCars, 10000);

如果您希望仅在ajax呼叫完成后安排下一次超时，则进行同步ajax呼叫或将setTimeout()放入ajax呼叫的success回调中。。。后者是更好的选择。

为了更好地控制时间和函数调用，您可以通过以下方式指定它们：

function loadCars() {
    $('#log').append('Cars loaded<br />');
};
function loadManufacturers() {
    $('#log').append('Manufacturers loaded<br />');
};
function loadCustomers() {
    $('#log').append('Customers loaded<br />');
};
function loadContent(delays, functions) {
    if (functions.length) {
        setTimeout(function () {
            functions.pop()();
            loadContent(delays, functions);
        }, delays.pop());
    };
};
loadContent([3000, 2000, 1000], [loadCars, loadManufacturers, loadCustomers]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="log"></p>

游乐场

相关文章：