CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 6159

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

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?

Upvotes: 6

Views: 21479

Answers (4)

rogeriolino
rogeriolino

Reputation: 1135

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');

Upvotes: 7

skobaljic
skobaljic

Reputation: 9644

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

Upvotes: 1

brso05
brso05

Reputation: 13232

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

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.

Upvotes: 1

koningdavid
koningdavid

Reputation: 8095

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

Upvotes: 2

Related Questions