chaining javascript функции

Question

Я искал эту тему на SO больше часа и не смог найти такой случай, как мой.

У меня есть веб-приложение, которое я разработал на Ruby on Rails. Он основан на форме с несколькими полями и кнопками для выполнения действий.

Это примеры (мое реальное приложение использует больше функций и больше комбинаций действий): Когда поле1 изменено, я хочу выполнить функции JS function1(), затем function2(), затем function3(). Когда поле 2 изменено, я хочу выполнить функции JS function2(), затем function3(). Когда поле3 изменено, я хочу выполнить функцию функции JS3().

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

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

Я попытался это:

onchange="function1();function2();function3()" 

, но это не сработало, потому что function2() начал выполняться до function1() завершил обновления через AJAX и тот же вопрос для FUNCTION3() в отношении function2 ().

Я также попытался:

onchange="function1();setTimeout(function(){function2();setTimeout(function(){function3()},FUNCTION2_DELAY)},FUNCTION1_DELAY)" 

, но это не сработало, потому что если FUNCTION1_DELAY установлен слишком долго, function2() не начнет выполняться до FUNCTION1_DELAY истек, в то время как function1() может выполняться намного быстрее, чем FUNCTION1_DELAY, и если значение FUNCTION1_DELAY установлено слишком короткое, функция2() начнет выполнение перед тем, как функция function1() завершит обновления, необходимые для выполнения функции2(). То же самое для функции 3() в отношении функции2().

Мой вопрос: есть ли более разумный способ сделать функцию2() начать выполнение только тогда, когда функция1() завершила обновление формы через AJAX, и то же самое для функции3() в отношении функции2()? Я знаю, что могу создавать новые методы контроллера, где я объединять эти функции, например слияние функций function1(), function2() и function3() в new_function1(), ... и т. Д., Но это делает мой код содержащим повторяющиеся действия и будет в конечном итоге сделать его сложнее поддерживать. Поэтому я предпочел бы более разумный способ справиться с этой проблемой.

Answer 1

Вам необходимо использовать Promises.

В основном это работает так:

var MyFunction1 = new Promise(
    function() { 
     //do stuff here 
    } 
); 

MyFunction1.then(Myfunction2 ...).then(Myfunction3 ...; 

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise http://api.jquery.com/promise/

Answer 2

setTimeout асинхронный, так что не будет работать. Вы можете вызвать функцию 2 в конце функции 1, но все же внутри функции.Аналогично для функции 3:

function one(){ 
    ...logic... 
    function two(); 
} 

function two(){ 
    ...logic... 
    function three(); 
} 

function three(){ 
    ...logic... 
} 

В качестве альтернативы, вы можете создать какой-то очереди функций, и только перейти к следующему, когда ток один закончен:

var functionQueue = [ 
    one, 
    two, 
    three 
]; 

function next(){ 
    var nextFn = functionQueue.shift(); 
    if(nextFn){ 
    nextFn(); 
    } 
} 

function one(){ 
    ...logic... 
    next(); 
} 
// same for two & three 

Вы можете также использовать обещания, которые являются достаточно мощными и делают код более понятным для чтения, но могут быть чрезмерными для этой проблемы.