How to prevent jQuery code from too much nesting functions?
<p>I don't know if calling this <em>nesting</em> is correct or not? But I know it's not a good code to have many function inside each others. Most of the jQuery methods have callback function that we can put our callbacks in there. But when we do callbacks inside another callback and continue this and going deeper and deeper it seems code become less readable and maybe less debuggable.</p>

<p>For example if I want to do some animations after each other I have to call every animation that I want to come after another one in it's callback function. It will go deeper and deeper in callback function. Look at this example(<a href="http://jsfiddle.net/mohsen/TbkjK/" rel="nofollow">fiddle</a>):</p>

<pre><code>$('#t').animate({height: 400}, 500, function(){
    $(this).animate({height: 200}, 500, function(){
        $(this).animate({width: 300}, 500, function(){
            $(this).animate({height: 300}, 500, function(){
                $(this).animate({'border-radius': '50px'}, 500, function(){
                    //and so on...
                });
            });
        });
    });
});
</code></pre>

<p>for doing a 5 steps animation I have to make a 5 level call stack. So my question is how you avoid this? I had same problem in my Node.js functions too.</p>

<p><strong>Update:</strong>
I know jQuery function have chinning feature but that don't solve the problem. because you can't do something in between of the chain. You could write above code like <code>$(selector').animate().animate()...</code> but you can't do same for this:</p>

<pre><code>$('#t').animate({height: 400}, 500, function(){
        console.log('step 1 done: like a boss');
        $(this).animate({height: 200}, 500, function(){
            console.log('step 2 done: like a boss');
            $(this).animate({width: 300}, 500, function(){
                console.log('step 3 done: like a boss');
                $(this).animate({height: 300}, 500, function(){
                    console.log('step 4 done: like a boss');
                    $(this).animate({'border-radius': '50px'}, 500, function(){
                        //and so on...
                    });
                });
            });
        });
    });
</code></pre>

<p>The ideal solution would be a code like this:</p>

<pre><code>$(selector).doQ(anim1, anim2, myfunc1, anim3, myfunc2)...
</code></pre>

<p>But sadly jQuery don't have an API like this(to my knowledge).</p>
