Javascript SetTimeout Method Loads time incorrectly

JavaScript
1

Hey everyone,

I have a question on javascript setTimeout method. I am trying to update google markers at intervals of 10 and 15 questions using setimeout. The marker that has a timeout of 15 seconds loads while the marker for 10 seconds doesnt. I i run the marker for 10 seconds independently, the correct results are achieeved. Any clarifications will be appreciated.

My code

var first_interval = window.onload = function(){
    setTimeout(initMap1, 15000);
  };

  var second_interval = window.onload = function(){
    setTimeout(initMap2, 25000);
  }; 

 function initMap1() {

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(-1.300355, 36.773855),
        mapTypeId: "roadmap"
    };    

    map = new google.maps.Map(document.getElementById('map_canvas_2'), myOptions);

        marker = new google.maps.Marker({
        position: new google.maps.LatLng(-1.300355, 36.773855),
        title: "Your driver",
        visible: true,
        map: map,
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div><div>' + cancelled + ' </div><div>' 
        });
    
        infowindow.open(map);

  }  

  function initMap2() {

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(-1.300355, 36.773850),
        mapTypeId: "roadmap"
    };    

    map = new google.maps.Map(document.getElementById('map_canvas_2'), myOptions);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-1.291879, 36.778389),
            title: "Your driver",
            visible: true,
            map: map,
            icon: image,
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div><div>' + driver_name_2 + ' </div><div>' + marker.position + '</div></div>'
        });
    
        infowindow.open(map,marker);

  }
2

The problem is that you’re attaching two window.onload event listeners, and the second one will override the first one.

It’s better to set up your script like

window.onload = function(){
  // all your code inside these function braces

  var first_interval = function(){
    setTimeout(initMap1, 15000);
  };

  var second_interval = function(){
    setTimeout(initMap2, 25000);
  }; 
}
3

Thanks @jsdisco, does your comment mean i put the initMap1 and initMap2 above the variables?

4

You can put your functions anywhere in your code, as long as you stay inside the braces of the onload function, because the functions are hoisted before the code runs (JavaScript first reads through your entire script and “lifts” those functions up to the top, before the code starts executing).

That’s why something like this is totally valid and working:

window.onload = function(){
  // all your code inside these function braces

  function initMap1(){
    // do stuff
  }

  var first_interval = function(){
    setTimeout(initMap1, 15000);
  };

  var second_interval = function(){
    setTimeout(initMap2, 25000);
  }; 

  function initMap2(){
    // do stuff
  }
}