0

I'm working on a canvas animation/game and I am having problems with a for in loop in one of my functions. In the interest space I removed some code.

function LoadScene(){ // function with the issue
                console.dir(game.frames); //195 objects 0{}, 1{}, 2{}, etc.
                for (var prop in game.frames){
                    console.log(prop); //Does not get here
                    if (game.frames[prop].scene == game.currentScene){
                        game.sceneData.push(game.frames[prop]);
                    }
                }
            }

function LoadFrames(){
                //xhr request
                // if successs load json data into namespace variable
                // get canvas
                // drawImage Loading Screen
                // return true

}


function StartGame(){
   if(LoadFrames()){
       LoadScene();
   }
}

The for in loop just fails every time (never goes into the loop) even though there are items in the in the object. I thought it might have been a hoisting issue so I put all my variables into a namespace at the top of the script and rearranged my functions. I think it could also be a async issue since the function works when I use the debugger to step through the function, but if that is the case then I have no idea how to fix it.

1 Answers1

0
function LoadFrames(){
            //xhr request
            // if successs load json data into namespace variable
            // get canvas
            // drawImage Loading Screen
            // return true
}

The XMLHttpRequest within LoadFrames may work asynchronously, whereas LoadFrames works synchronously. LoadFrames always returns true immediately after sending the AJAX request, regardless of if the frames(maybe you mean game.frames?) have been loaded; i.e. it does not check the response of the request.