Sequencing Events in Javascript

I am trying to make a simple hidden object game using javascript. When the user finds and clicks an image, I want 3 things to happen in the following order; a sound plays, the image size increases, and the image goes invisible. The problem I am running into is getting the 3 events to happen sequentially, not concurrent. Right now, seems that all three events happen all at the same time.

I've tried using setTimeout(), and while that does create a delay, it still runs all functions at the same time, even if each function is nested in setTimeout.

Example: (a开发者_Python百科ll this does is waits 1.5 sec then plays the sound and makes the image invisible):

function FindIt(image, id){
var t = setTimeout('sound()',10);
var b = setTimeout('bigger(' + image + ')',30);
var h = setTimeout('hide(' + image + ')',1500);
}

Below are the functions I am currently using and the actual results are: click the image, nothing happens for 2 seconds, then the sound plays and the image goes invisible.

function FindIt(image, id){
sound();
bigger(image);
hide(image);
}

function sound(){
document.getElementById("sound_element").innerHTML= "<embed src='chime.wav' hidden=true    autostart=true loop=false>";
}

function bigger(image){
var img = document.getElementById(image);  
img.style.width = 112;  
img.style.height = 112;
}


function hide(id){
var ms = 2000; 
ms += new Date().getTime();
while (new Date() < ms){} //Create a 2 second delay
var img = document.getElementById(id);
img.style.visibility='hidden';
}

Any guidance would be greatly appreciated!

To trigger things sequentially, you need to execute the second item some amount of time after the first one completes, execute the third item some amount of time after the second one completes, etc...

Only your sound() function actually takes some time, so I'd suggest the following:

function FindIt(image, id){
    sound();
    // set timer to start next action a certain time after the sound starts
    setTimeout(function() {
        bigger(image);
        // set timer to start next action a certain time after making the image bigger
        setTimeout (function() {
            hide(image);
        }, 1000);   // set this time for how long you want to wait after bigger, before hide
    }, 1000);   // set the time here for how long you want to wait after starting the sound before making it bigger
}

FYI, the animation capabilities in libraries like jQuery or YUI make this sort of thing a lot easier.

Also, please don't use this kind of construct in your JS:

while (new Date() < ms){}

That locks up the browser for that delay and is very unfriendly to the viewer. Use setTimeout to create a delay.

For reference, using the animation libraries in jQuery, the jQuery code to handle a click on the object and then animate it over a 2 second period to a larger size, delay for 1 second, then slideup to disappear is as follows:

$("#rect").click(function() {
    $(this).animate({height: 200, width: 400}, 2000).delay(1000).slideUp();
});

jQuery manages an animation queue and handles setting all the timers and doing all the sequencing and animation for you. It's a lot, lot easier to program and gives a very nice result.

You can see it work and play with it here: http://jsfiddle.net/kC4Mz/.

why don't use "event" approach. like onTaskDone();

function task1(arg, onTask1Done){
    console.log(arg);
    if(onTask1Done)onTask1Done();
}

task1("working", function(){console.log("task2");});

The Frame.js library is designed to elegantly handle situations like this:

function FindIt(image, id){
   Frame(10,   function(next) { sound();       next(); });
   Frame(30,   function(next) { bigger(image); next(); });
   Frame(1500, function(next) { hide(image);   next(); });
   Frame.start();
}

Frame.js offers many advantages over using standard timeouts, especially if you are doing a lot of this kind of thing, which for a game, you likely are.

https://github.com/bishopZ/Frame.js