Ensure that the next function starts when the previous is complete. Keep all of the target elem's registered events disabled until the job is done
<p>I have this markup:</p>

<pre><code>&lt;span class="click"&gt;click&lt;/span&gt;
&lt;div&gt;&lt;span&gt;first child&lt;/span&gt;, &lt;span&gt;second child&lt;/span&gt;, &lt;span&gt;third child&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>After clicking ".click" (let's call it "target"), I want:<br>
1. add " done" html to the first child of the next div, like this: </p>

<pre><code>$('.click').click(function (e) {
    $(this).next('div').children('span').first().html(function () {
        return $(this).html() + ' done';
    });
});
});
</code></pre>

<p>2. ONLY AFTER the previous function is complete, add " done" html to the third child of the target's next div;<br>
3. ONLY AFTER the previous function is complete, <code>alert ("third child done. coming to second...")</code>;<br>
4. ONLY AFTER the previous function is complete, add " will be the last elem to deal with" html to the second child of the target's next div;<br>
5. Finally, ONLY AFTER the previous function is complete, <code>alert ('the job is done')</code>;<br>
6. Since those functions may require a long time to be completed, even maybe involving multiple setTimeouts, I must disable all events associated with ".click" until the entire logic is complete (in this particular case, it means they will be enabled after <code>alert ('the job is done')</code>).<br>
Maybe use $.Deferreds? Or create some kind of callbacks?..</p>
