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, ...]
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, ...]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));