я искал много ответов на JavaScript, но у меня нетЯ нашел тот, который действительно отвечает моей проблеме. Что я'я пытаюсь сделать это загрузить изображение, получить данные о пикселях, выполнить анализ, а затем загрузить другое изображение, чтобы повторить процесс.

Моя проблема в том, что я могу• предварительно загрузить все изображения, поскольку этот сценарий должен работать с большим количеством изображений, а предварительная загрузка может быть слишком ресурсоемкой. Так что я'Я застрял, пытаясь загрузить новое изображение каждый раз через цикл, но яЯ застрял в состоянии гонки между загрузкой изображения и сценарием, рисующим его на холсте.с контекстом. По крайней мере яя уверен, чтоС тем, что происходит, потому что сценарий будет хорошо работать с предварительно кэшированными изображениями (например, если я обновлюсь после загрузки страницы ранее).

Как и ты'посмотрим, есть несколько строк кода, закомментированных, потому что яя невероятно новичок в JavaScript, и они не былине так, как я думал, но я нене хочу забывать о них, если мне понадобится функциональность позже.

Это фрагмент кода, который, по моему мнению, порождает проблему:

РЕДАКТИРОВАТЬ: Таким образом, я получил свою функцию на работу после того, как предложение

 function myFunction(imageURLarray) {
  var canvas = document.getElementById('imagecanvas');
  console.log("Canvas Grabbed");

  if (!canvas || !canvas.getContext) {
    return;
  }

  var context = canvas.getContext('2d');

  if (!context || !context.putImageData) {
    return;
  }

  window.loadedImageCount = 0;
  loadImages(context, canvas.width, canvas.height, imageURLarray, 0);
}

function loadImages(context, width, height, imageURLarray, currentIndex) {
  if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) {
    return false;
  }
  if (typeof currentIndex == 'undefined') {
    currentIndex = 0;
  }

  var currentimage = new Image();
  currentimage.src = imageURLarray[currentIndex];

  var tempindex = currentIndex;
  currentimage.onload = function(e) {

    // Function code here

    window.loadedImageCount++;

    if (loadedImageCount == imageURLarray.length) {

      // Function that happens after all images are loaded here
    }
  }
  currentIndex++;
  loadImages(context, width, height, imageURLarray, currentIndex);
  return;
}