10

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

Следующий пример иллюстриует мой вопрос:

function f1(){ setTimeout( function(){ console.log(1); }, 30); }
function f2(){ setTimeout( function(){ console.log(2); }, 20); }
function f3(){ setTimeout( function(){ console.log(3); }, 10); }
f1(); f2(); f3(); 

на выходе 3 2 1 как сделать что-бы выдавало 1 2 3 ?

Желательно без коллбеков - т.к. если надо запустить последовательно больше двух функций это уже тяжело читать. Многое говорит о том что возможно решение с помощью обьекта $.Deferred, но пока не видел разумного варианта.

Подобный вопрос задавался не раз, но я почему-то не нашел ответа который бы меня устроил.

4
  • 1
    Напишите функцию setSyncTimeout, которая будет циклить проверку времени запуска функции и текущее время. А в вашем примере время запуска setTimeout должно быть 30, 20+30, 20+30+10
    – ilyaplot
    20 июн 2016 в 13:38
  • 1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 21 июн 2016 в 6:50
  • @NicolasChabanovsky ставлю галку, но она почемуто опять пропадает и второй раз ее поставить сразу не удается...
    – Serafim
    21 июн 2016 в 19:56

4 ответа 4

15

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

function f1() {
    return new Promise(function(resolve){
        setTimeout(function() {
            console.log(1);
            resolve();
        }, 30);
    });
}

Остальные функции преобразуются аналогичным образом.

Теперь у вас есть три функции (f1, f2, f3), которые возвращают Обещания и вы хотите выполнить их последовательно. Если вы не используете библиотек, вроде Bluebird, то вам придется реализовать очередь вызова Обещаний вручную. Это не так сложно, как кажется:

// Аргумент "deeds" - это массив функций, которые должны выполняться
// последовательно. При этом, каждая функция должна возвращать
// Обещание (Promise).
var seqRunner = function(deeds) {
    return deeds.reduce(function(p, deed) {
        return p.then(function() {
            // Выполняем следующую функцию только после того, как отработала
            // предыдущая.
            return deed();
        });
    }, Promise.resolve()); // Инициализируем очередь выполнения.
}

А пользоваться этой очередью нужно вот так:

seqRunner([f1, f2, f3]).then(function() {
    console.log('Done!');
});

А вот и JSFiddle с рабочим примером.


Замечание:

Если у вас заранее известное, небольшое число функций, то можно вообще обойтись без функции seqRunner и связывать функции вручную:

f1().then(function() {
    return f2();
}).then(function() {
    return f3();
}).then(function() {
    console.log('Done!');
});
6
  • если не ошибаюсь можно анонимные функции не накручивать и обойтись прямой передачей: f1().then(f2).then(f3).then(...)
    – Grundy
    20 июн 2016 в 14:10
  • Можно. Но тут все зависит от аргументов, принимаемых (и возвращаемых через Обещания) функциями f1, f2, f3. В данном конкретном случае, обертки действительно не нужны. 20 июн 2016 в 14:12
  • @DmitriySimushev Спасибо! это решение которое я хотел узнать :) подскажете: каким фреймворком вы бы воспользовались чтобы это реализовать еще проще? (все-таки выглядит немного сложновато...) кстати, вы упомянули библиотеку Bluebird - с ее помощью можно тоже?
    – Serafim
    21 июн 2016 в 20:04
  • @Serafim, насколько мне помнится, в bluebird такого функционала нет. А насчет громоздкости, то при желании код можно сократить. Собственно я не считаю, что для этого нужно подтягивать какой-то тяжелый фреймворк. При желании, можно подтянуть маленькую библиотечку из npm реализующую только аналог функции seqRunner из ответа. Конкретной библиотеки не подскажу т.к. не использую. 21 июн 2016 в 20:23
  • @DmitriySimushev если позволите я уточню некоторые моменты в которых я не совсем уверен: 1. Promise это Deferred без методов resolve и reject, которые в данном случае не нужны т.к. запускаются один раз при создании обьекта. 2. Функция которой инициализируется Promise запускается при создании Promise а параметр resolve - это метод объекта Deferred , который запускает все коллбеки в случае успеха. 3. метод , then() делает то же что и done() - т.е. навешивается коллбеки а используете вы его на случай, если вдруг понадобится навесить обработчики ошибок...
    – Serafim
    23 июн 2016 в 16:13
4

Альтернативный вариант, сделать обертку над setTimeout возвращающую Promise, например так:

function delay(timeout){
    return new Promise(function(r){
        setTimeout(r,timeout);
    });
}

Теперь код из вопроса может выглядеть следующим образом:

function delay(timeout) {
  return new Promise(function(r) {
    setTimeout(r, timeout);
  });
}

function f1() {
  console.log(1);
}

function f2() {
  console.log(2);
}

function f3() {
  console.log(3);
}
delay(3000).then(f1)
  .then(function(){return delay(2000);})
  .then(f2)
  .then(function(){ return delay(1000);})
  .then(f3)
  .then(function() {
    console.log('all finish');
  });

Или даже так

function delay(timeout) {
  return new Promise(function(r) {
    setTimeout(r, timeout);
  });
}

function f1() {
  console.log(1);
  return 2000
}

function f2() {
  console.log(2);
  return 1000;
}

function f3() {
  console.log(3);
}
delay(3000).then(f1)
  .then(delay)
  .then(f2)
  .then(delay)
  .then(f3)
  .then(function() {
    console.log('all finish');
  });

Если таких функций много, то можно собрать из них массив и с помощью функции reduce собрать один большой Promise

function delay(timeout) {
  return new Promise(function(r) {
    setTimeout(r, timeout);
  });
}

function f1() {
  console.log(1);
  return 2000
}

function f2() {
  console.log(2);
  return 1000;
}

function f3() {
  console.log(3);
}

[f1, f2, f3].reduce(function(promise, func) {
    return promise.then(func).then(delay);
  }, delay(3000))
  .then(function() {
    console.log('all finish')
  });

4
  • Что-то мне подсказывает, что таймеры - только пример 21 июн 2016 в 7:45
  • @DmitriySimushev, не исключено, но в принципе функция delay, просто заменяется на любую другую функцию возвращающую promise, а сам подход остается тем же
    – Grundy
    21 июн 2016 в 7:49
  • Тогда в чем принципиальное отличие вашего ответа от моего? =) 21 июн 2016 в 7:50
  • @DmitriySimushev, тем, что у меня функции f - сами по себе не асинхронные :)
    – Grundy
    21 июн 2016 в 7:59
2

Если каждой добавить таки callback отчёт о выполнении, можно держать очередь в массиве и вызывать следующую ф-ю по завершению предыдущей:

function f1(){ setTimeout( function(){ console.log(1); next(); }, 30); }
function f2(){ setTimeout( function(){ console.log(2); next(); }, 20); }
function f3(){ setTimeout( function(){ console.log(3); next(); }, 10); }

var queue = [f1, f2, f3]
    ,i=0
    ,next = function(){ queue[i]  &&  queue[i++]();}
;

next(); // 1 2 3
9
  • может вместо счетчика массив как очередь использовать? я имею ввиду pop вернее shift
    – Grundy
    21 июн 2016 в 6:28
  • @Grundy как вариант – но вдруг там захочется вернуться на пару шагов назад, если что-то пошло не так : )
    – Sergiks
    21 июн 2016 в 8:17
  • Это тогда будет какая-то супер очередь :-)
    – Grundy
    21 июн 2016 в 8:26
  • queue[i] && queue[i++]();
    – Serafim
    21 июн 2016 в 20:15
  • @Serafim вам не понятен этот фрагмент кода? Он проверяет, существует ли элемент массива queue[i], содержащий ф-ю, и если да, то выполняет эту функцию, и затем увеличивает i на 1.
    – Sergiks
    21 июн 2016 в 20:40
1
async function go(){
            await f1();
            await f2();
            await f3();
        }
go();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.