Как сделать так, чтобы функция выполнялась только после того, как другая завершится?

Question

[nluparev]

Привет.

У меня есть две функции:

refreshAnchorSchema();
configUriAnchor();

Мне нужно, чтобы 2-ая гарантированно запустилась только после 1-ой. Я пробовал применить jquery new $.Deferred();, но не совсем понял как это сделать.

Спасибо.

Answer 1

[Алексей Уколов]

Дисклеймер

Кому не нравится название "обещания", мысленно заменяйте его на то, которое считаете подходящим. Я выбрал именно его, чтобы концепция, лежащая в их основе, была интуитивно понятна.

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

one().done(two);

function one() {
    var dfd = new $.Deferred();

    // Запускаем асинхронную задачу. Например, ajax-запрос.
    setTimeout(function () {
        var foo = 'bar';

        // "Выполняем обещание", передавая в него какую-то информацию.
        // Передавать аргументы, разумеется, не обязательно.
        dfd.resolve(foo);
    }, 2000);

    // Возвращаем из функции обещание, на которое могут подписаться другие функции.
    // Обратите внимание, этот код выполнится до того, как завершится асинхронная задача.
    return dfd.promise();
}

function two(foo) {
    // Обрабатываем данные, полученные внутри асинхронной функции one.
    console.log('two', foo);
}

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

код

one().then(two, onOneError).then(three, onTwoError);

function one() {
    var dfd = new $.Deferred();

    setTimeout(function () {
        console.log('one');
        
        if (Math.round(Math.random() * 10) >= 5)
        {
            dfd.resolve();
        }
        else
        {
            dfd.reject();
        }
    }, 1000);

    return dfd.promise();
}

function two() {
    var dfd = new $.Deferred();

    setTimeout(function () {
        console.log('two');
        
        if (Math.round(Math.random() * 10) >= 5)
        {
            dfd.resolve();
        }
        else
        {
            dfd.reject();
        }
    }, 1000);

    return dfd.promise();
}

function three() {
    setTimeout(function () {
        console.log('three');
    }, 1000);
}

function onTwoError() {
    console.log('twoError', arguments);
}

function onOneError() {
    console.log('oneError', arguments);
}

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

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

Другой вариант - передавать callback, но это прямой путь в callback hell. Для запуска трех и более функций подряд я его не рекомендую - смотрите сами, на что становится похож код:

one(function () {
    two(three)
});

function one(callback) {
    console.log('one');
    setTimeout(callback, 1000);
}

function two(callback) {
    console.log('two');
    setTimeout(callback, 1000);
}

function three() {
    console.log('three');
}

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

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

Comments

[codingal]

Внешние флаги, конечно, не айс, но без них не обойтись, если ожидаются какие-то действия от пользователя либо, например, установление канала p2p в webrtc

[Алексей Уколов]

codingal: А чем для этой цели не подходит promise? А еще лучше - шина событий.

[Оптимус Пьян]

Алексей Уколов: Можно я спрошу вас про пример jsfiddle.net/koceg/1k5vkvz5 promise ведь возвращает либо onFulfilled либо onRejected это значит что строка
return dfd.promise(); записывает в переменную var dfd одно из этих значений?
А что такое тогда
var dfd = new $.Deferred();

[Алексей Уколов]

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

[Алексей Уколов]

это значит что строка return dfd.promise(); записывает в переменную var dfd одно из этих значений?

Разумеется, это не так. В этой строке вызывается метод promise объекта dfd. Этот метод как раз и возвращает промис. А new $.Deferred(); - это, собственно, создание deferred-объекта.