Javascript make functions execute one after another

Question

I've got some functions all set up. One's a typing effect, one is for paragraphs, other for adding " " and one for a blinking cursor like in the terminal. All these change the innerHTML of a div.

When the page loads the function Start() has about 10 functions inside it that makes up a sequence of what should happen: Text is written, cursor starts blinking, paragraph, text written again, etc, etc.

The thing is, they all execute at the same time unless I use setTimeout() for each one inside the Start() function. And that's kind of messed up given that I have to define a start time for each one of the functions.

EDIT: No JQuery here. Just javascript. This is my whole JS file:

ctrl = 0;
y=0;
block = 0;
test = "";
first_time = 1;

function typing(id, sentence){

        var index=0;
        var intObject= setInterval(function() {
               document.getElementById(id).innerHTML+=sentence[index]; 
               index++;
               if(index==sentence.length){
                     clearInterval(intObject);
                }
            }, 100);
}


function paragraph(x){
    while(x>0){
        document.getElementById("container").innerHTML+="<br>";
        x--;
    }
}

function advance(x){
    while(x>0){
        document.getElementById("container").innerHTML+="&nbsp;";
        x--;
    }
}


function blink(y){
    if(first_time == 1){ctrl = y; first_time=0;}
    if(ctrl!=0){
        if(block=='0'){
        test = document.getElementById("container").innerHTML;
            document.getElementById("container").innerHTML+="\u258B";
            block=1;
        }
        else if(block=='1'){
            document.getElementById("container").innerHTML=test;
            block=0;
        }
        ctrl--;
        setTimeout("blink(y);", 300);
    }
    if(ctrl==0){first_time=1;}
}


function start(){
    typing('container','Subject Name:');
    setTimeout("blink('4');",1700);
    setTimeout("typing('container',' Carlos Miguel Fernando');",2800);
    setTimeout("blink('6');",5600);
    setTimeout("paragraph('1');",7200);
    setTimeout("blink('8');",7400);
    setTimeout("typing('container','Age: 21');",9500);
    setTimeout("blink('4');",10800);
    setTimeout("paragraph('1');",12800);
    setTimeout("blink('4');",13200);
    setTimeout("typing('container','Location: Povoa de Varzim, Portugal');",14500);
    setTimeout("blink('14');",19000);
    setTimeout(function(){document.getElementById("more").style.display="block";}, 23000);
    setTimeout("typing('more','Find Out More');",24000);
}

Answer 1

First you need a way to find out when a function has ended. The ideal mechanism is called a promise. There's a good implementation in jQuery. Suppose in your list of activities you wanted an artificial delay:

blink(4);
sleep(1000);   // wait 1 second
blink(4);

Implement that like this:

var sleep = function(ms) {
    var result = $.Deferred();
    setTimeout(result.resolve, ms);
    return result.promise();
};

i.e. create a $.Deferred, and return its promise(), but in between, start some activity that will complete at a later time. When it does, call resolve() (here I just get setTimeout to call it directly). You can pass a value to resolve to be the logical "return value" of your function. Also you can instead call reject which is logically like throwing an exception.

Once you have a set of building block functions that return promises you can do this:

typing('container','Subject Name:').then(function() {
   return blink('4');
}).then(function() {
   return typing('container',' Test');
}).then(function() {
   return blink('4');
}).then(function() {
   // and so on
});

UPDATE:

Click here to see a quick mock-up in jsbin.

Answer 2

check below code

function blink(id)
{
    //Do something
    alert(id);

    if(id == 2)
    {
        //call typing with text
        blink(4);
    }
    if(id == 4)
    {
        //call typing with text
        blink(6);
    }
    if(id == 6)
    {
        //call typing with text
        blink(8);
    }
    if(id == 8)
    {
        //Complete
    }
}

And call blink(2); it will call blink function one after another.