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

Question

[one_day]

Необходимо их выполнить так, чтобы каждая следующая начиналась после того как полностью отработают таймеры из предыдущей
не смог ,к сожалению, сам разобраться с данной задачей
после выполнения функций должен сформировать массив: ["hello world", "Job succeded", "step3", "step4"]
но из-за таймеров получаю: ["step4", "hello world", "Job succeded", "step3"]
читаю про Deferred, как их применить конкретно на данной задаче все не придумаю
ссылка в codepen

код 1

<script>
var results=[];
function Parallel(setings,step,done) {
this.parallelJobs = setings;

this.job = function (step){
    step(function done(message) {
            results[results.length] = message;    
    });
    return this;
};
this.done = function (done) {
    done(results);
    return this;
};
};
</script></spoiler>

этот участок кода не могу править

код 2

<script>
    /************************************************
     * Please don`t change the code bellow this line *
     ************************************************/
	 
    var runner = new Parallel({
		//the number of simultaneously possible jobs, other jobs should be placed in queue.
        parallelJobs: 2
    });

    runner.job(step1)
        .job(step2)
        .job(step3)
        .job(step4)
        .done(onDone);

    function step1(done) {
        console.log('step1');
        for ( let i = 0; i <= 10e4; i++ ) ;
        console.log('end step1 cicle');
        setTimeout(done, 1000, 'hello world');
    }

    function step2(done) {
        console.log('step2');
        for ( let i = 0; i <= 10e2; i++ ) ;
        console.log('end step2 cicle');
        setTimeout(done, 1200, 'Job succeded');
    }

    function step3(done) {
        console.log('step3');
        for ( let i = 0; i <= 10e3; i++ ) ;
        console.log('end step3 cicle');
        setTimeout(done, 1500, 'step3');
    }

    function step4(done) {
        console.log('step4');
        for ( let i = 0; i <= 10e1; i++ ) ;
        console.log('end step4 cicle');
        setTimeout(done, 100, 'step4');
    }

    var isPassed = false;

    function onDone(results) {
        console.log('onDone', results);
        console.assert(Array.isArray(results), 'expect result to be array');
        console.assert(results[0] === 'hello world', 'Wrong answer 1');
        console.assert(results[1] === 'Job succeded', 'Wrong answer 2');
        console.assert(results[2] === 'step3', 'Wrong answer 3');
        console.assert(results[3] === 'step4', 'Wrong answer 4');
        console.log('Thanks, all works fine');
        isPassed = true;
    }

    setTimeout(function () {
        if ( isPassed ) return;
        console.error('Test is not done.');
    }, 10000);
</script>

ссылка в codepen

Comments

[Антон Спирин]

У вас в условиях еще и parallelJobs есть. Это актуально?

[one_day]

Антон Спирин, да, актуально

[Stalker_RED]

У вас здесь нет никакого параллельного исполнения (строго говоря, js вообще однопоточный, по крайней мере пока вы не начнете использовать Web Workers, или что-то вроде этого).

Если нужно выполнять функции последовательно, то не ясно почему parallel в названии.

Для последовательного вызова можно было бы использовать промисы или коллбэки.

Я не совсем понимаю вашу задумку, но возможно, вам подойдет Promise.all().

P.S.: очень похоже, что это задачка с codewars. Дали бы ссылку что-ли. Там еще что-то про очередь заданий, которая у вас напрочь отсутствует.

[Антон Спирин]

one_day, так если выполнять параллельно две, тест не пройдет. Четвертая таска раньше завершится, чем третья

[one_day]

Я пробовал использовать Promise, но результат такой же

<script>
var results=[];
var myPromise;
function Parallel(setings,step,done) {

this.parallelJobs = setings;

this.job = function (step){
   
myPromise = new Promise((resolve, reject) => {

    resolve(step); 
  
});
 myPromise.then((step) => {

  step(function done(message) {
        results[results.length] = message;    
});
});
    return this;
};
this.done = function (done) {
    setTimeout(function () {
    done(results);
}, 1700);

    return this;
};
};

</script>

[one_day]

Stalker_RED, спасибо за ссылки
Эту задачу дают в универе, первоисточник неизвестен, возможно что так и есть как вы говорите.

[Антон Спирин]

Stalker_RED, там по условиям параллельное выполнение задач.

Answer 1

[Антон Спирин]

Вот:

function Parallel(settings) {
  this.parallelJobs = settings.parallelJobs;
  this.results;
  this.tasks = [];
  this.onDone;
  this.index = 0;
  this.activeJobs = 0;
  
  this.start = function() {
    this.results = Array(this.tasks.length);
    
    for (var i = 0; i < Math.min(this.parallelJobs, this.tasks.length); i++) {
      this.next();
    }
  }
  
  this.next = function(result) {
      var index = this.index;
      this.activeJobs++;
     

      this.tasks[this.index](function(result) {
        this.onResult(result, index);
      }.bind(this));

      this.index++;
  }
  
  this.onResult = function(result, index) {
    this.results[index] = result;
    this.activeJobs --;
    
    if(this.tasks[this.index]) {
      this.next();
     } else if (this.activeJobs === 0) {
      this.onDone(this.results);
    }
  }
  
  this.job = function (step) {
    this.tasks.push(step);
    return this;
  };
  
  this.done = function (onDone) {
     this.onDone = onDone;
     this.start();
  };
};

Демо: https://jsfiddle.net/rockon404/thL746dd/

Comments

[one_day]

Антон Спирин , огромное спасибо за помощь,
вкратце: создаем массив с шагами - затем выполняем поочередно и результат кладем в результирующий массив с таким же индексом как и в массиве с шагами, с этим помогает bind?

[Антон Спирин]

one_day, bind нужен, чтобы this в колбеке на экземпляр Parallels (runner) указывал и не было ошибки при вызове this.onResult(result, index);.

Переменная index необходима для передачи значения this.index в колбек, так как если туда передавать this.index, то на момент вызова колбека он вероятно уже изменится. Поэтому переменная необходима. По ее значению пишется ответ в тот же индекс массива ответов который имеет задача в массиве задач. Это надо чтобы ответы на выходе были в том же порядке, что и задачи на входе. В примере задача 4 завершается раньше, чем задача 3.

Переменная activeJobs нужна чтобы знать, что все задачи точно завершились и можно вызывать onDone.

Math.min страхует от случая, когда количество поступивших задач меньше, чем максимальное количество параллельных в настройках. То есть если пришла одна задача, а разрешено запускать две, запустится одна. Пришло три, разрешено запускать 2, запустит две.
Как-то так.

Спасибо за задачку, было интересно.

[one_day]

Антон Спирин, благодарю

Answer 2

[Coder321]

class Queue {

    queue = [];
    isRunning = false;

    add(task) {
        queue.push(task);
        if (!this.isRunning) {
            this.start();
        }

    }

    async start() {
        this.isRunning = true;
        for (let i = 0; i < this.queue.length; i++) {
            await this.queue[i]();
        }
        this.isRunning = false;
    }

}

const queue = new Queue();

queue.add(() => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            //your timer
        }, 1000)
    });
})