Run function 2 when function 1 completes
<p>I know similar questions have been asked and answered before but the truth is I just cant figure out what I need to do even after reading them.</p>

<p>The code below is from a tutorial. It displays some text with a typewriter effect. 
That all works fine.</p>

<p>I've added an <code>_</code> that moves along in front of the text like a dos cursor.</p>

<p>I'm trying to make the _ blink after the typewriter animation has completed.</p>

<p>I know (or should I say "think") I need a callback to trigger makeBlink() but I can't for the life of me figure out where to use it. </p>

<p>Could somebody please help me out?</p>

<pre><code>var char = 0;
var caption = "";

function showCaption(obj) {
    caption = obj.attr('title');
    if(caption)
        type();
}


function type() {
    $('#caption').html(caption.substr(0, char++));
    if(char &lt; caption.length+1)
        setTimeout("type()", 150);
    else {
        char = 0;
        caption = "";
    }
}

function makeBlink(){
    $("#cursor").html('&lt;blink&gt;_&lt;/blink&gt;');
}


$(window).load(function() {
    showCaption($("#caption_span"));
    makeBlink(); // This runs whilst the text is still typing :(
});
</code></pre>
