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

Question

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.

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?

Answer 1

You need to call loadCars on setTimeout and on setInterval.

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

}, 10000);
console.log('page loaded');

Answer 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.

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).