Асинхронная обработка массива с таймером, почему не работает?

Question

[akdes]

Привет всем.

Есть необходимость обработать асинхронно массив, с задержкой.
Сделал фиддл, который наглядно показывает проблему:
https://jsfiddle.net/akdes/20he422s/

По моей задумке с нулевой задержкой должно писать в консоль текст из первого массива "foo" и только через 2 секунды "bar"
Что я делаю не правильно? как решить проблему?

Заранее спасибо!

Comments

[akdes]

Я примерно представляю природу проблемы: во время исполнения указатель показывает уже на вторую часть массива. Однако умнее я от этого не стал, и решение не придумал :D

[Ди Ма]

Еще на основе генератора можно

var textArray  = [{
  "text": "foo",
  "delay" : "2000"
}, {
  "text": "bar",
  "delay" : "2000"
}];

// генератор
var genetator = (function* (arr) {
  for (var i = 0; i < arr.length; i++) yield arr[i];
  return 'end';
})(textArray);

// рекурсиваня функция
function say() {
	// получаем значение (генератор возвращает по одному)
	var val = genetator.next().value;
  console.log(val);
  
  // через 1 сек, если это не последнее значение
  setTimeout(function () {
    if (val != 'end') say(); // повторяем снова
  }, 1000);
}

say();

[Виктор Л]

const arr = [{
  "text": "foo",
  "delay" : "2000"
},
{
  "text": "bar",
  "delay" : "2000"
},
{
  "text": "bar1",
  "delay" : "5000"
},{
 "text": "bar",
  "delay" : "1000"
}
];

function timeout(val){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            console.log(val.text);
            resolve();
        }, val.delay);
    });
}
(async () => {
  for (const val of arr) {   
    await timeout(val);
  }
  console.log('Расчет окончен');
})();

Answer 1

[Stalker_RED]

Все делается проще:

var items = [
{
  text: "foo",
  delay: 0
},
{
  text: "bar",
  delay: 2000
}];

printAsync();
function printAsync() {
  var delay = 0;
  items.forEach(item=>setTimeout(function() {
    console.log(item.text)
  }, item.delay))
}

https://jsfiddle.net/ddo259tv/

У вас в коде нет ничего асинхронного кроме вызова setTimeout, которому сто лет в обед. А смысл нового слова async из es8 вы не поняли.

Comments

[akdes]

Ваш пример работает в фиддле, но не работает в electron, т.е. задержка тоже не срабатывает, как в моём варианте. Есть идеи?

[akdes]

contents.forEach(content=>setTimeout(function() {
  console.log(content["content"][0].sysname)
}, 2000))

В данном случае ожидание с самого начала длится 2 секунды, а потом разом выдаёт мне содержимое 3ёх массивов

UPDATE: я потерялся, Ваш пример тоже не работает, если задать 2 секунды, заместо переменной

[Stalker_RED]

akdes: так и должно быть, потому что так работает setTimeout - вы практически одновременно запускаете два таймера и оба с задержкой 2 секунды. По истечении этих двух секунд они и срабатывают.

А вы все еще не описали чего вы хотите добиться и где здесь асинхронность.
Пример в фиддле работает вот почему: i.imgur.com/bAmFkvr.png

[akdes]

Stalker_RED:
Задумка:
JSON от сервера описывает структуру страницы:
пример:

[
{"div":
  "content": [
  {
    "text":"foo",
    "showtime":5
  },
  {
    "text":"foobar",
    "showtime":5
  }
]
},
{"div":
  "content": [{
    "text":"otherfoo",
    "showtime":7
  }
]
}]

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

var i = 0;
for (box of data) {
 placeContent(i++, box.content);
}

function placeContent(divid, contents)
{
  var delay = 0
  contents.forEach(content=>setTimeout(function() {
    console.log(content.text)
    delay = content.showtime * 1000
  }, delay))
}

[Stalker_RED]

akdes: Ну и отлично же. Первые два блока будут показаны на пятой секунде, последний - на седьмой.
Но если вас все еще что-то не устраивает, то напишите наконец чего вы хотите. Словами, блин напишите, кодом у вас не получается же.

[akdes]

Stalker_RED: в итоге от кода выше я ожидаю в консоле:
foo
otherfoo
через 5 секунд
foobar

[Stalker_RED]

akdes: Тогда что делает 7 в otherfoo?

[akdes]

Stalker_RED: Как понятный(надеюсь) пример: Представьте показ рекламы на телевидении.
У меня есть два канала(дивы), которые я хочу одновременно снабжать инфой.
я подаю на первый канал два ролика по 5 секунд и на второй канал ролик 7 секунд.

через for (box of data)
идёт разделение каналов. и на каждый канал вызывается функция "покажи ролик": placeContent(i++, box.content);
при вызове функции должен показаться первый элемент массива без задержки, следущий элемент получает задержку от showtime первого. параллельно этому идёт обработка второго канала, который имеет только один ролик, длинной 7 секунд. Что будет после 7 секунд - не известно и пока не дано, ибо элементов в массиве больше нет.

[akdes]

Stalker_RED: ок, понял проблему, на каждый див прохожусь по массиву и плюсую showtime, получается у первого 5, у второго 10 - так работает.
Спасибо Вам за попытку понять и помочь.

[Stalker_RED]

akdes: Можно сделать так: https://jsfiddle.net/pqyra2vL/
setInterval, который раз в секунду уменьшает оставшуюся задержку и проверяет, не пора ли сменить кадр.

[akdes]

Stalker_RED: класс! спасибо большое!

Answer 2

[olezhenka]

Такая рекурсивная функция пойдет?

var textArray  = [{
  "text": "foo",
  "delay" : "2000"
},
{
  "text": "bar",
  "delay" : "2000"
}];
(function one(i) {
	console.log(textArray[i].text);
  setTimeout(function() {
  	one(i+1);
  }, textArray[i].delay)
})(0);

Comments

[olezhenka]

а лучше вот так:

var textArray  = [{
  "text": "foo",
  "delay" : "2000"
},
{
  "text": "bar",
  "delay" : "2000"
}];
(function one(i) {
        if(!textArray[i]) return;
        console.log(textArray[i].text);
  setTimeout(function() {
        one(i+1);
  }, 2000)
})(0);

[Stalker_RED]

olezhenka: а зачем самодельная рекурсия, если есть setTimeout, который еще и точнее время выдерживает? К тому-же вопрос совсем не о том, как дергать таймеры а о async. Просто он сформулирован туманно и непонятно чего автор хочет добиться. Скорее всего он просто пытается понять зачем этот sync, но придумал неудачный синтетический пример.

[akdes]

Stalker_RED: то что я хочу разобраться и не опытен, Вы правы.
Задача такова: есть два контэйнера (в одном большом массиве), на каждый есть свои данные и на каждый, будь это текст или изображение своя задержка

[Stalker_RED]

akdes:
Это похоже на текст задачи?

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

Больше похоже на описание каких-то загадочных условий. "Дырявые абстракции" во всей красе.

[akdes]

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

[Stalker_RED]

akdes: и конечно же вы поленились загуглить что такое "дырявые абстракции".

В том-то и дело, что в попытке упростить вы перестарались. В результате вы получаете правильные ответы на те вопросы, которые вы задали. Но вам они не подходят, потому что не решают вашу проблему. А проблему они не решают потому, что вы ее не описали. Замкунутый круг.

Это одна из основных причин, по которым процент решенных вопросов такой низкий.
На stackoverflow этот вопрос заминусовали бы. Затем вы бы либо обиженно ушли, либо задались вопросом "эй, а почему меня минусуют" и исправили бы вопрос (или задали новый). Но тостер, сцуко, толерантный. На нем можно только нажимать "мне нравится", а минусовать нельзя.

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