Как предотвратить слишком много вложенных функций в коде jQuery?

Не знаю, правильно ли это вложение или нет? Но я знаю, что это не очень хороший код, чтобы иметь много функций внутри друг друга. Большинство методов jQuery имеют функцию обратного вызова, в которую можно поместить обратные вызовы. Но когда мы делаем обратные вызовы внутри другого обратного вызова и продолжаем это и углубляемся, кажется, что код становится менее читаемым и, возможно, менее отладочным.

Например, если я хочу делать несколько анимаций друг за другом, я должен вызывать каждую анимацию, которую я хочу сделать за другой в функции обратного вызова. Он будет глубже и глубже в функции обратного вызова. Посмотрите на этот пример ( fiddle ):

$('#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...
                });
            });
        });
    });
});

для выполнения анимации 5 шагов необходимо создать стек вызовов 5 уровня. Так что мой вопрос в том, как ты избегаешь этого? У меня были такие же проблемы в моих функциях Node.js.

Обновление: Я знаю, что функция jQuery имеет функцию хиннинга, но это не решает проблему. потому что нельзя что-то делать между цепью. Вы можете написать выше код, как $ (селектор ') .animate () .animate ()... Но для этого нельзя сделать то же самое:

$('#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...
                    });
                });
            });
        });
    });

Идеальным решением был бы такой код:

$(selector).doQ(anim1, anim2, myfunc1, anim3, myfunc2)...

Но, к сожалению, у jQuery нет такого API (насколько мне известно).

-121--917110-

У меня есть вопрос о продукте Highstock (бета-версия), http://www.highcharts.com/products/highstock

Для всех, кто имеет опыт использования этого или чувствует, что они могут ответить, пожалуйста!!!

Я замечаю, что иногда программное обеспечение будет подключаться к точкам данных, даже если между ними отсутствуют данные. Это отличная особенность, потому что она дает ощущение непрерывности, несмотря на фактически отсутствующие данные... Но иногда, это пробелы.. Я не смог найти точную настройку, которая отвечает за это.. Если кто-то знает, как достичь непрерывных графиков, пожалуйста, скажите мне. Спасибо.