run timed function when page has loaded

Question

so i want this function to run every 24h and execute a few steps on a website: For some reason, it stops running after the first query Selector.

what I would like to happen is:

run script -> click element -> wait until the next page has loaded -> click next element.

Any help is much appreciated!

window.onload = function(){
setTimeout(function() {
    document.querySelectorAll("[href*='0310']")[0].click();
  }, 4000);
//wait until next page loads
setTimeout(function() {
  document.querySelectorAll("[href*='0310']")[1].click();
},4000);
//wait until next page loads
setTimeout(function() {
  document.querySelectorAll("[href*='0310']")[1].click();
},4000);
//wait until next page loads
setTimeout(function() {
document.querySelectorAll("[type='checkbox']")[1].click();
},4000);
//wait until next page loads
setTimeout(function() {
document.querySelectorAll(".btn-primary")[2].click();
},4000);
};

I'm quite lost here...

Answer 1

All the setTimeout functions will run at the same time, 4 seconds after page load. setTimeout is done asynchronously so you need to change them to 4, 8, 12, 16 and 20 seconds.

setTimeout(function(){/*first*/}, 4000);
setTimeout(function(){/*second*/}, 8000); 
setTimeout(function(){/*third*/}, 12000); 
setTimeout(function(){/*fourth*/}, 16000); 
setTimeout(function(){/*fifth*/}, 20000); 

I've set up a jsfiddle which does what you want.