Javascript Global variable only update inside anonymous function

Question

please give me some clue for this javascript problem. I have a global variable markers. And try to push every marker to markers. But the problem is , after push to markers. i was trying to alert the value inside function and outside function. the result is totally different. markers inside function give me array of marker, but markers outside stay empty. Why i got different value of markers global variable?

This is the snippet of my code:

for (var i = 0; i < netotal; i++) {
    setTimeout(function () {
        marker = new google.maps.Marker({
            position: pos[iterator],
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            icon: neicon  
        });
        iterator++;
        markers.push(marker);console.log(markers);
    }, i * 50);  
}

alert (markers);

Thank you for your kind help or clue.

Inside your question you state that the alert inside the function is on "markers" and outside the function is on "marker". Maybe some typing mistake? Also it would help to share the rest of the code too. I can not see when the alert will be triggered which is a crucial thing to know here. Is the alert triggered right after the for loop? Then the markers will be empty indeed because it will be filled when the delayed functions execute. — rmoorman
– rmoorman, Commented Oct 25, 2012 at 7:40
@rmoorman , yap i made some typing mistake. i 've added some line on the snippet. the console result and alert is different. — syant
– syant, Commented Oct 25, 2012 at 7:48
Then it is caused by the fact, that the markers will be filled later on (due to setTimeout). Your edit makes that clear too. You could confirm this by replacing the alert with something like setTimeout(function() { console.log(markers); }, netotal * 50); — rmoorman
– rmoorman, Commented Oct 25, 2012 at 8:04

Barmar · Accepted Answer · 2012-10-25 08:29:52Z

1

You're pushing to markers in a function that's called using setTimeout, so the push won't happen until some time later. But you're calling alert(markers) immediately, before any of the timeouts have occurred. So the array is empty at that time.

UPDATE:

To see the final contents of markers, you need another setTimeout:

setTimeout(function() { alert(markers); }, netotal*50);

edited Oct 25, 2012 at 8:29

answered Oct 25, 2012 at 7:55

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

syant Over a year ago

ahh i see, so how do i run the next script after all the marker loaded?

Barmar Over a year ago

Maybe use another setTimeout with a higher timeout. Or if

syant Over a year ago

set it to 0 but my markers[0] still undefined outside function

Barmar Over a year ago

JavaScript is not multitasking, the functions invoked by setTimeout won't run until the script ends, even with timeout 0. You need to do the outside call with another setTimeout. See UPDATE.

Marc · Accepted Answer · 2012-10-25 07:39:07Z

1

Depends on the scope, to access the global markers use window.markers.

answered Oct 25, 2012 at 7:39

Marc

6,7919 gold badges51 silver badges79 bronze badges

1 Comment

syant Over a year ago

trying to update to window.markers.push(marker) is not helping :(

Collectives™ on Stack Overflow

Javascript Global variable only update inside anonymous function

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related