wait for loop to finish populating array before executing next function-CodePudding

I am trying to access imgArr after this loop, of course I get am empty Array because console.log(imgArr) is executed synchronously with the for loop. But I need imgArr to be populated in order to be used in other logic. I can't use setTimeout again because because I can't know how much time is needed for the loop to be completed. I tried to wrap all of this inside a function and call it inside another function, but to no avail

var imgArr = []
var nextBtn = document.querySelector('[aria-label="Next"]')
for (var i = 0; i < 15; i  ) {
    setTimeout(() => {
        if (nextBtn) {
            Object.values(document.querySelectorAll('img')).map(img => {
                if (imgArr.indexOf(img.src) === -1) imgArr.push(img.src)
            });
            nextBtn.click();
            nextBtn = document.querySelector('[aria-label="Next"]');
        };
    }, i * 1000);
};
console.log(imgArr) // expected: [], needed: [element1, element2, ...]

CodePudding user response：

You can modify your code like this

imgArray is a promise so you cannot access the resolved value directly

var nextBtn = document.querySelector('[aria-label="Next"]')

const imgArray = Promise.all(Array(15).fill(0).map((_, i) => new Promise(resolve => {
  let array = []
  setTimeout(() => {
    if (nextBtn) {
      array = Object.values(document.querySelectorAll('img')).map(img => img.src);
      nextBtn.click();
      nextBtn = document.querySelector('[aria-label="Next"]');
    };
    resolve(array)
  }, i * 1000);
}))).then(data => [...new Set(data.flat())])

imgArray.then(d => console.log(d)) // expected: [], needed: [element1, element2, ...]

CodePudding user response：

Function gets executed before setTimeout call, convert that into Promise it will be easy to handle

let result = [];
const nextClick = (res) => {
  const nextBtn = document.querySelector('[aria-label="Next"]');
  if (nextBtn) {
    const imgs = Object.values(document.querySelectorAll("img"));
    result = Array.from(new Set([...result, ...imgs.map((img) => img.src)]));
    nextBtn.click();
    nextBtn = document.querySelector('[aria-label="Next"]');
  }
  res(result);
};
const wait = (ms) => new Promise((res) => setTimeout(() => nextClick(res), ms));
const promiseArr = new Array(15).fill(0).map((_, i) => wait(i * 1000));
Promise.all(promiseArr).then(() => console.log(result));