Populating array in Javascript using setInterval function

Question

My objective is to populate an array dynamically using setInterval function. So I created a global variable array that I can access outside the scope of setInterval function. But when I try to do console.log, its empty.

However, if I try to do console.log inside the setInterval function, I can see the array populating every 1000 ms.

Its supposed to be a global variable so i should be able to see the variable right? How come it cannot be seen outside the function?

below is the code:

var array = [];
var n;

setInterval(function(){
    n = Math.random();
    if(n < 0.5){
        array.push('white');
    }else{
        array.push('black');
    }
    // console.log(array);   // i can see the array here
}, 1000);

console.log(array); // but i cannot see the array here

UPDATE:

Ok I now know the reason why its empty. So when I put a setTimeout of 5secs, I can now see the contents.

setTimeout(function(){
  console.log(array); // i can now see the array!
}, 5000);

possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Scimonster, Nov 23 '14 at 10:12
lol instead of downvoting, why don't you just answer the questions directly. anyway, I have updated AND answer my own question! — anagnam, Nov 23 '14 at 10:31
Because it's been asked dozens of times, and you should have searched. — Scimonster, Nov 23 '14 at 10:32

GillesC · Answer 1 · 2014-11-23T10:19:47.713

0

Because you are using setInterval, with a 1 second delay, to add to the array the last line console.log(array); is executed before any of the interval function so the array would still be empty then.

Good info here: http://javascript.info/tutorial/settimeout-setinterval

edited Nov 23 '14 at 10:19

answered Nov 23 '14 at 10:12

GillesC

10,647
3
40
55

even if you put 10 secs, its still empty. – anagnam Nov 23 '14 at 10:17
Well yes it will always execute after. Even if you use 0 as time, that is the point. setInterval set the function to be executed but then the code carry on and the array is of course empty until any setInterval function is run... – GillesC Nov 23 '14 at 10:18

score 0 · Answer 2 · answered Nov 23 '14 at 10:16

0

I'm pretty sure the array you "can't see" is actually displaying the correct array, an empty one. It gets called before the functions first array.push, so it shows up as empty.

answered Nov 23 '14 at 10:16

Eric Guan

15,474
8
50
61

that's the thing. why its empty when every 1 secs, its populating? – anagnam Nov 23 '14 at 10:18
Because its empty when you make the console.log call on the last line. After the call the array is being populated, which you can see by calling console.log inside the function. – Eric Guan Nov 23 '14 at 21:13

score 0 · Answer 3 · answered Nov 23 '14 at 10:23

0

setInterval schedules a function to be executed asynchronously. This means that the following code is executed first, finished, and only then, some time later, the scheduled function is started.

answered Nov 23 '14 at 10:23

hon2a

7,006
5
41
55

score -1 · Accepted Answer · answered Nov 23 '14 at 10:26

the reason why I cannot see the array is because theres not enough time for the console to log the contents so by putting another setInterval or setTimeout to delay the execution of console.log, I can now see the contents.

var array = [];
var n;

setInterval(function(){
    n = Math.random();
    if(n < 0.5){
        array.push('meron');
    }else{
        array.push('wala');
    }
    // console.log(array);   // i can see the array here
}, 1000);

setInterval(function(){
  console.log(array); // i can now see the array!
}, 2000);

Populating array in Javascript using setInterval function

4 Answers4