CODEWITHSUNDEEP
javascriptgoogle-mapsfor-loop
STS1SS
STS1SS

Reputation: 229

Confused on a simple for loop

OK this is a major edit. I thought I could get there by giving an example of similar simple code, but it is not helping.

I have a working function which displays a Google map, then places markers with info windows. This all works fine. Then I decided I wanted to slightly delay the dropping of the markers so instead of all dropping at once they drop pause for xx milliseconds drop the next. I cannot get this to work and the primary source of my confusion is I seem to be confused on the way a for loop is working in JavaScript.

I was using setTimeout, couldn't get this working, realized my confusion has nothing to do with the setTimeout, so I pulled it and replaced it with an alert and I get the same behavior. I am not looking for someone to write my code, I just don't understand what I'm missing here.

I would expect in a for loop is this behavior...

For do something do something else do another thing next

It appears by what I am seeing I get this behavior...

For do something do something else (and do it for each loop through code) do another thing next

So here is the code:

    function delaydropmarkers()
    {
        alert("delaydropmarkers");
    }

    function marker(location) 
    {

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(37.5, -98.35);
        var mapOptions = 
        {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

        var infowindow = new google.maps.InfoWindow(), marker, i;

        for (i = 0; i < location.length; i++) 
        {

            marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(location[i][1], location[i][2]),
                animation: google.maps.Animation.DROP,
                map: map
            }
            );

            delaydropmarkers();

            google.maps.event.addListener(marker, 'click', (function (marker, i) 
            {
                return function () 
                {
                    infowindow.setContent(location[i][0]);
                    infowindow.open(map, marker);
                }
            }
            )(marker, i));

        }

    }

So I call the marker function which should create a marker, go to the delaydropmarkers function (it just has an alert in it right now) and then add the listener. I get all markers going at once still. I'll apologize in advance I know this is something I already feel stupid about, but I am just not seeing the problem.

Any help is greatly appreciated.

Upvotes: 0

Views: 107

Answers (1)

Ian
Ian

Reputation: 50933

First mistake is using W3Schools. http://ryanblunden.com/please-dont-use-w3schools

Make it into its own function that you can recursively call when you want:

function showCars(cars, index) {
    index = index || 0;
    if (index < cars.length) {
        console.log(cars[index]);
        setTimeout(function () {
            showCars(cars, ++index);
        }, 2000);
    }
}

var my_cars = ["BMW", "Volvo", "Saab", "Ford"];
showCars(my_cars);

http://jsfiddle.net/UcWTH/4/

The reason I am using console.log and not document.write as you have it in your code, is because document.write should only be used when the page is being rendered, not after. Luckily, that is true in your case. Unfortunately, setTimeout negates that.

Using setTimeout means that the code you provide for the first parameter will be executed asynchronously at X milliseconds later. By that time, if you used setTimeout properly, your page will be rendered and you will be overwriting the document. So like I said, since setTimeout is asynchronous, it doesn't actually hold up/pause/stop Javascript processing. I think that's the source of your confusion. You want it to "delay" for 2 seconds, but if you truly wanted to do that, you would freeze the browser for 2 seconds. setTimeout lets you do it without freezing the browser. But you can't use it in the normal way you would think...and that's why my code above isn't a normal for loop.

Upvotes: 1

Related Questions