Javascript function variable all of a sudden becomes undefined?

Question

Hi all, this is the weirdest thing. My code is below:

function menuSwipe(init){
    dojo.query('div.fill div.container div.menu div.group ul').forEach(function(item){
        dojo.fx.wipeOut({
            node: item,
            duration: 1
        }).play();
        dojo.query('li', item).forEach(function(childrenItem){
            if (dojo.hasClass(childrenItem, 'active')) 
                childrenItem.parentNode.className = 'items active';
        });
        if (item.className == 'items active') {

            dojo.query('div.category', item.parentNode).forEach(function(parentItem){
                setTimeout(function(){
                    menuOpen(parentItem, init);
                    doGrayscale(parentItem);
                }, 100);
            });
        }
    });
}

Basically init stays in memory until it goes in the if (item.className == 'items active') conditional. After that it becomes undefined. It is a boolean value that I am setting. As long as it is before if (item.className == 'items active') it will retain its value. I have no reason why its doing this. I have tried to do this.init = and setting it as var init = init. Does anyone know or is there some way I can retain its value all throughout the function? Its not the init naming, I have tried a different name and it still does the same thing.

Thanks, Darren

Answer 1

The problem is that the timeout is running after the function has completed, so the parentItem variable has gone out of scope when the timeout runs.

Create a local variable in that scope, so that a closure is created for the timeout function. That way each iteration has it's own variable:

dojo.query('div.category', item.parentNode).forEach(function(parentItem){
  var itemCopy = parentItem;
  window.setTimeout(function(){
    menuOpen(itemCopy, init);
    doGrayscale(itemCopy);
  }, 100);
});