Как настроить последовательности функций, которые я хочу выполнить в JavaScript?

Question

Я работаю над JavaScript-ориентированным сайтом, где у меня будет много вещей, которые нужно выполнить в определенном порядке.Многие вещи включают в себя анимацию и AJAX-загрузку.Некоторый псевдокод может выглядеть следующим образом:

1. Загрузка данных в формате JSON
2. Создание HTML-элементов с использованием загруженных данных JSON и рендеринг их внутри div
3. Созданиеэлементы внутри div прокручиваются с помощью ползунка пользовательского интерфейса jQuery
4. Случайное число от 1 до общего количества загруженных элементов
5. Заставьте ползунок jQuery UI прокручивать (анимировать) элемент, представляющий случайное числочисло продолжительностью 500 миллисекунд
6. Загрузить дополнительные данные в формате JSON
7. Заменить другие элементы на странице
8. И так далее ...

Каждый шаг в этом заключен в функцию - одна функция загружает данные JSON, другая генерирует HTML-элементы, третья инициализирует слайдер пользовательского интерфейса jQuery и так далее.Инкапсуляция кода в функции облегчает чтение кода для меня, но, прежде всего, я хочу иметь возможность вызывать функции в разных порядках в зависимости от того, что происходит на странице, и я хочу быть уверен, что одна функция закончилась до того, какследующий выполнен.

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

Я хочу сделать следующее:

1. Загрузить данные JSON.Если загрузка прошла успешно, продолжайте и ...
2. Генерируйте HTML-элементы
3. Сделайте элементы прокручиваемыми
4. Произведите рандомизацию числа между 1 и общим количеством загруженных элементови передать его ...
5. Функция, которая заставляет слайдер jQuery скользить (анимироваться) к элементу.Когда анимация закончится ...
6. Загрузка дополнительных данных в формате JSON.Если загрузка прошла успешно, продолжайте и ...
7. Замените другие элементы на странице

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

1. Произвести рандомизацию числа между 1 и общим количеством загруженных элементов и передать его ...
2. Функция, которая заставляет слайдер jQuery скользить (анимированный)к элементу.Когда анимация закончится ...

Это означает, что я должен был бы контролировать обратные вызовы на каждом шаге.

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

Заранее спасибо!/ Томас

Answer 1

Поможет ли вам функция jQuery .queue () ?

Answer 2

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

$("#justOneStep").click(function() {
   loadImage(false);
});

$("#twoStepsPlease").click(function() {
   loadImage(true);
});


function loadImage(boolDoMore) {
   // Do the stuff that loads an image
   ...

   if(boolDoMore) {
      nextFunction();
   }
}

function nextFunction() {
   // Do some more stuff
   ...
}

Не очень необычно, но легко понять и контролировать, и в данный момент достаточно для моих нужд.

/ Thomas

Answer 3

Я пытался выполнить этот код:

var seq = 0;
var func = [];

func[1] = function(seq) {
    setTimeout(function() {
        console.log("Executing function 1");
        sequencer(seq);
    }, 2000);

}

func[2] = function(seq) {
    console.log("Executing function 2");
    sequencer(seq);
}

func[3] = function(seq) {
    console.log("Executing function 3");
}

function sequencer(seq) {
    seq = seq + 1;
    func[seq].call();
}

sequencer(seq);

Но результат (в Firebug):

Executing function 1

func[seq] is undefined
[Break on this error] func[seq].call(); 

Я думаю, что проблема вызвана контекстом, но я не уверен. JavaScript чувствителен к контексту, в котором вызывается функция.

/ Thomas

Answer 4

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

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

Псевдокод:

var func['1'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['2'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['3'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['4'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

function sequencer(seq) {
  seq = seq + 1;
  window.func[seq]
}