JS: Iterate through a list using a timeout without async/await

Question

I have a list of divs I am iterating through. I think I figured it out using async/await:

let list = document.querySelectorAll('div')

async function goThrough() {
   for (let x = 0; x < list.length; x++) {
     let foo= await new Promise(resolve => {
        setTimeout(() => {
          console.log(x)
          resolve();
        }, 5000)
     });
   }
}

goThrough();

This seems to be logging each div node in the list with 5 seconds between them. I can't figure out how to do this using straight Promises though, without the luxury of async/await. I'm fine using async/await but curiosity has gotten the better of me and just trying to break it down to see if I can do it without it.

Alexandru Bulat · Accepted Answer · 2021-01-16 21:08:47Z

1

You could use recursion and call each promise only after the previous one was completed.

function goThrough(index, total) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), 1000);
  }).then((result) => {
    console.log(result);
    if (index + 1 < total) {
      goThrough(index + 1, total);
    }
  });
}

const list = document.querySelectorAll("div");
goThrough(0, list.length);

answered Jan 16, 2021 at 21:08

Alexandru Bulat

895 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

terrymorse · Accepted Answer · 2021-01-16 23:51:21Z

0

You could go through the list recursively, no need to use Promises:

const list = [1, 2, 3, 4, 5, 6];

function goThrough(list, iList = 0) {
  if (iList >= list.length) {
    return;
  }
  setTimeout(() => {
    console.log(`list[${iList}] = ${list[iList]}`);
    goThrough(list, iList + 1);
  }, 5000);
}

goThrough(list);

edited Jan 16, 2021 at 23:51

answered Jan 16, 2021 at 21:14

terrymorse

7,1561 gold badge23 silver badges31 bronze badges

Comments

vitaly-t · Accepted Answer · 2022-11-21 01:50:36Z

0

A better way is to use list for what it already is - an iterable. The example below uses iter-ops library:

import {pipeAsync, delay} from 'iter-ops';

const i = pipeAsync(list, delay(1000)); //=> AsyncIterable

// testing:
(async function() {
    for await(const a of i) {
        console.log(a); // each value delayed by 1s
    }
})();

And you can iterate through the async result without asyc/await, if that's what you really want, though it's just needlessly awkward.

edited Nov 21, 2022 at 1:50

answered Oct 16, 2022 at 11:42

vitaly-t

26.1k17 gold badges129 silver badges151 bronze badges

Collectives™ on Stack Overflow

JS: Iterate through a list using a timeout without async/await

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related