Question

Excuse my English as it is my second language. So I have a function being called to animated a "reboot" of a CLI interface. This animation is quite long and calls several other more basic animations which are, in turn, placed in the queue of animations to be processed. I have tried just adding all of the animations separately when a command is entered and that works perfectly, however, I would prefer if I could use a function to do it instead because I will be calling the reboot animation quite often. Currently, I am using a class which contains these function which might explain its unusual notation.

So here is the queue processing function:

start_animating(){
    try{
        if (animation_done){
            // if previous animation is done executing
            g_e("input").onkeypress = function(event){return main.key_checker(event);};
            // briefly set the input box back to its default
            var y = this.animations.shift();
            // get the latest animation to run
            y.func(y.args);
            // run the function with the args provided
        }else{
            //if an animation is running, disallow input from user
            g_e("input").onkeypress = function(event){if(event.keyCode == 13){
            g_e("input").value = "";return false;}};
        }
    }
    catch(e){}
}

Here is the interval where the processing happens:

var that = this;
setInterval(function(){that.start_animating();}, 1);

Then here is the reboot animation:

animation_reboot(object){
    //takes an object as args
    this.add_animation(this.clear_console, {});
    //adds the clear_console function to the processing queue with no args clearing the div named console
    this.add_animation(this.animation_fade, {element:"startUp"});
    // adds the fade in / out animation with args element = startUp
    this.add_animation(this.plbl, {message:"initiliazing boot sequence............|reticulating squids....^^^^^^|dereticulating squids....^^^^^^|deregulating squids....^^^^^^|reregulating squids....^^^^^^|squids prepared...^^^^^^",element:"console", speed:75});
    // adds the print letter by letter animation to queue ^ is a equivelant to a sleep and | to a <br> 
    this.add_animation(this.clear_console, {});
    //clears console again
    this.add_animation(this.plbl, {message:"SquidOS.^^^^^^.^^^^^^.^^^^^^ Booted!^^^^^^^^^^^^^^", element:"console", speed:75})
    //print letter by letter
    this.add_animation(this.clear_console, {});
    // clears console again
    this.add_animation(this.plbl, {message:"Awating command. Type help for a list of commands.", speed:75, element:"console"});
    // print letter by letter
}

The problem occurs when I call:

this.add_animation(this.animation_reboot, {});

Expected behavior would be for the reboot animation to be added to the queue then all the animations associated with the reboot animation to be added and processed.

However, the actual behavior is that the no animations from the reboot animation are being processed. I have tried calling just the reboot animation which causes it to work, but when I try adding the reboot animation to the queue it is not called / the sub animations are not called.

I can edit in other parts of the script / HTML as needed, but I didn't really want to waste anyone's time searching through the entire script. Thanks for any help / advice you can offer.

Adding a animation function to a "queue" of animation functions which adds more animation functions

0 个答案: