Javascript: Как заставить функцию2 выполняться только после того, как функция1 полностью завершена?

Question

У меня есть некоторый код с порядком функций в том порядке, в котором я хочу, чтобы они выполнялись. Тем не менее, они, кажется, в то же время (они начинаются последовательно в течение микросекунд друг от друга предположительно).

Проблема в том, что некоторые функции включают анимацию. Как сделать так, чтобы следующая функция не выполнялась до тех пор, пока предыдущие функции не будут полностью завершены ???

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

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open, function() {
                });
            });
        });
    });
});

Если быть точным, я хочу, чтобы функция scroll_to_content () выполнялась после того, как все предыдущие действия были выполнены полностью. В настоящее время он выполняется одновременно со всем остальным, и поэтому прокрутка моей страницы полностью отключена, поскольку размер моего содержимого продолжает изменяться после завершения scroll_to_content ().

Answer 1

Цепочки обратных вызовов - это, в основном, решение, но я подозреваю, что вы неправильно распределяете свои обратные вызовы в своих вызовах jQuery. $.animate(...) имеет необязательный обратный вызов complete - здесь вы хотите передать функцию, которая должна выполняться после завершения вашей начальной анимации. Все Эффекты в jQuery UI должны иметь аналогичный необязательный аргумент.

Вы можете использовать подобный шаблон самостоятельно для цепочки обработчиков событий, например:

function handler(event, callback) {
  // do some work
  // ...
  callback();
}

Эта стратегия для оценки функций цепочки называется стиль передачи продолжения и удобна во многих ситуациях. Однако используйте его осторожно, так как многие люди считают его более запутанным, чем традиционная последовательная реализация.

Answer 2

у вас есть 3 варианта:

1 - разделите анимацию на несколько вызовов animate (). Это пример , чтобы прояснить это для вас.

2- Следуйте ответу @ dml.

3- Попробуйте использовать этот плагин, чтобы добавить задержки между вашими звонками (не знаю, сможет ли он исправить этот сценарий или нет, попробуйте) http://www.evanbyrne.com/article/jquery-delay-plugin

Answer 3

http://api.jquery.com/queue/

Извините, у меня нет достаточно времени, чтобы вдаваться в подробности, но, как сказал предыдущий комментатор, для решения этой проблемы вам стоит сосредоточиться на очередях.