Как работают переменные в Javascript?

Question

[Сухроб Саидов]

Хочу сделать некую проверку по изображению:

var proxy = false;

var img = new Image();

img.onload = function () {
    proxy = false;
}

img.onerror = function () {
    proxy = true;
}

img.src = '...';

console.log('Proxy:', proxy);

Такое ощущение что консоль выдает значение до использования onload/onerror
Как можно синхронизировать функцию?

Answer 1

[ISE73]

Код выполняеся последовательно. И конечно он не ждет когда там загрузится картинка.
Поправить так:
1) Современный способ: asyc/await
2) Дедовский способ: SetInterval - в функции проверяем proxy, если true - сбрасываем SetInteval и делаем что там хотелось сделать с картинкой.

Comments

[ISE73]

MaxKorz, я не заставляю так делать.
Я показал возможные варианты.
И, заметьте, это не вариант №1 и этот вариант в исполнении сложнее чем №1.

[Владимир Проскурин]

А зачем ждать каллбек таймера, когда можно подождать каллбек onload?

Answer 2

[Владимир Проскурин]

конечно выдает до onload, ведь onload это callback, он произойдет после загрузки изображения. У вас код тупо идет дальше.

Comments

[Сухроб Саидов]

Можете решение посоветовать?

[ThunderCat]

Сухроб Саидов, решение чего? вам нужно сделать что-то после загрузки изображения? Тогда оформите это "что-то" в функцию и вызывайте внутри img.onload, или просто весь код туда засуньте...

[Павел]

Сухроб Саидов, положить console.log('Proxy:', proxy); в тот же колбэк?

[Сухроб Саидов]

извините не правильно выразился, так вот что хотелось то
после всей этой функции стоит проверка:

if (!proxy) {
    //code
} else {
    //code
}

Как решение засунуть код в onload/onerror не хотелось бы принимать

[Василий Смирнов]

MaxKorz,

без коллбэков вы не обойдетесь

ну, тут вы не правы. есть промисы, для последовательного выполения кода

Answer 3

[GreatRash]

function loadImages(imagesArray, callback) {
  var imagesStates = {};
  var imagesChecked = 0;
  var totalImages = imagesArray.length;

  for (var i = 0; i < totalImages; i++) {
    var src = imagesArray[i];
    imagesStates[src] = {"loaded": false};
    
    var img = new Image();

    img.onload = function() {
      if (this.complete || this.naturalWidth > 0) {
        imagesStates[src].loaded = true;
      }
      
      imagesChecked++;
      
      if (imagesChecked >= totalImages) {
        callback(imagesArray, imagesStates);
      }
    };

    img.onerror = function() {
      imagesChecked++;
      
      if (imagesChecked >= totalImages) {
        callback(imagesArray, imagesStates);
      }
    };
    
    img.src = src;
  }
}

// ===============================

loadImages(
  ["src_1.png", "src_2.png", "src_3.png"],

  function(imagesArray, imagesStates) {
    console.log(imagesStates);
  }
);