Q:

Arrays: not to lose elements inside a synchronized function?

I would like to know why, in the following code, the elements of coupleFound array are deleted when the function setInterval dies. The idea is, get into the a element and check her tag name "ai".
When he accept this tag he makes a copy of the entire element starting from his parent, and put into the coupleFound array. It works, but only inside of set Interval function! I don't understand because I declared the array outside of the function! I believe this is happening because "set Interval" is not synchronized, but I don't know how fix this problem!
var clicked = 0,
    totalClicks = 3,
    index = 0,
    listIds = new Array("289657", "2680235", "1597254", "269621"),
    coupleFound = new Array( ),
    videos = document.getElementById( "videos_list" );

var interval = setInterval(function( ) {
    coupleList = videos.getElementsByTagName( "a" );

    for(var i = coupleList.length; i--;) {
        for(j=0; j < listIds.length; j++) {
            if(coupleList[i].getAttribute( "ai" ) == listIds[j]) {
                coupleFound[index] = coupleList[i].parentNode;
                index++;
                break;
            }
        }
        videos.removeChild( videos.lastChild );
    }

    document.getElementById('btnMoreVideos').click();
    clicked++;
    if(clicked >= totalClicks) {
        clearInterval( interval );
        alert("I'm inside of the function. The length is:" + coupleFound.length)
    }
}, 1000);

alert("The length of the array is:" + coupleFound.length);

What can I do to solve this problem?

A:

You're more or less right. setInterval is asynchronous. Your last line of code will be ran immediately, before setInterval fires for the 3rd time.
There's no good way to sleep/block in JavaScript. You have to restructure your code so that it runs in the order you want. Normally this means using callbacks. i.e., call a function from inside your if(clicked >= totalClicks) block that does what you want, rather than putting it after setInterval.
e.g.,
var clicked = 0,
    totalClicks = 3,
    index = 0,
    listIds = new Array("289657", "2680235", "1597254", "269621"),
    coupleFound = new Array( ),
    videos = document.getElementById( "videos_list" );

function allDone() {
    alert("The length of the array is:" + coupleFound.length);
}

var interval = setInterval(function( ) {
    coupleList = videos.getElementsByTagName( "a" );

    for(var i = coupleList.length; i--;) {
        for(j=0; j < listIds.length; j++) {
            if(coupleList[i].getAttribute( "ai" ) == listIds[j]) {
                coupleFound[index] = coupleList[i].parentNode;
                index++;
                break;
            }
        }
        videos.removeChild( videos.lastChild );
    }

    document.getElementById('btnMoreVideos').click();
    clicked++;
    if(clicked >= totalClicks) {
        clearInterval( interval );
        alert("I'm inside of the function. The length is:" + coupleFound.length);
        allDone();
    }
}, 1000);

Although you should avoid global variables as much as possible. Maybe pass coupleFound or its length into allDone instead if you don't need access to too many vars.

