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

I have the following scenario:

我有以下场景:

I have a javascript ajax function loadCars() that needs to be called after the page loads in 10 seconds, and then every 60 seconds.

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

The below is what I have tried so far:

下面是我到目前为止所尝试的:

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

What is happening is that the function is being called after 10 seconds but never again, what am I missing?

发生的是函数在10秒后被调用，但再也不会了，我漏掉了什么?

4 个解决方案

#1

You need to call loadCars on setTimeout and on setInterval.

您需要在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');

#2

I don't agree with the answers given because they use setInterval or don't wait for the ajax call to be finished. IMO your should set a new timeout only when the function loadcars (and the ajax call) has finished.

我不同意给出的答案，因为它们使用setInterval或不等待ajax调用完成。在我看来，只有当函数loadcars(以及ajax调用)完成时，才应该设置新的超时。

Example:

例子:

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)

The advantage if this is that it will only start setting a new timeout when the HTTP request is finished and prevent the function from getting out of sync. If you use setinterval in combination with an ajax call then the next ajax call will happen in 60 seconds even if the current one is delayed for 10 seconds (and you don't want that).

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

#3

You can call setTimeout(loadCars, 60000) in your loadCars() method that way you call it once initially with setTimeout 10 seconds then from that point it sets a timeout for 1 minute out every time it executes...

您可以在loadCars()方法中调用setTimeout(loadCars, 60000)，这样您就可以在初始时调用它一次，并设置10秒的setTimeout，然后在每次执行时设置1分钟的timeout……

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

setTimeout(loadCars, 10000);

If you want the next timeout to be scheduled only after ajax call is completed then either make a synchronus ajax call or put the setTimeout() in your success callback of your ajax call...The latter being the better option.

如果您希望在ajax调用完成之后才安排下一个超时，那么要么进行一次同步ajax调用，要么将setTimeout()放到ajax调用的成功回调中……后者是更好的选择。

#4

To get more control over timings and function calls you could specify them all this way:

要获得对计时和函数调用的更多控制，可以通过以下方式指定它们:

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>

Playground

操场上

#1