for loop randomly goes from 1 to 0

Question

Basically, every time the page is refreshed, the for loop may change from 1 to 0. I don't know why this happens, but it affects the way my images are layered on top of each other.

I tried using a foreach loop but it still gave me the same result.

This is the code for the for loop:

for (let index = 0; index < Img.length; index++) {
  const element = Img[index];
  fs.readFile(__dirname + '/assets/textures' + element, function(err, data) {
    console.log("Index: " + index);
  });
};

Arrays are very simple.

let Img = ["/red.png", "/face.png"];

I'm doing this all on the server. NodeJS

Answer 1

Try this

let Img = ["/red.png", "/face.png"];

async function prepareImages() {
  for (let index = 0; index < Img.length; index++) {
    const element = Img[index];
    await loadImage(element)
  };
}

function loadImage(element) {
  return new Promise((resolve, reject) => {
    fs.readFile(`${__dirname}/assets/textures${element}`, function(err, data) {
      console.log("dir ", `${__dirname}/assets/textures${element}`);
      if(err) {
        reject("Error: ", err)
      }
      
      resolve(data);
    });
  })
}