Question

var img = new Image();
var url = "some url "
var value = "old value"

img.onError = function() {
  alert('Cannot load image: "'+som+'"');
};

img.crossOrigin = '';
img.onload = function() {
  // do something
  value = "New value"
};
img.src = som;

alert(value);// pops with "old value"

因为我没有在onload函数中做任何改变？我在onload函数中存储的结果不能全局使用？

Answer 1

问题是，img.onload内的函数是在alert（value）之后执行的;`。

时间轴：

value = "old value";
img.onload设置为函数（尚未执行）
alert(value);
已加载图片
value = "new value";

如果您在加载图片后在浏览器控制台中键入value，则应为“新值”。

Answer 2

根据您的代码，预计alert会显示＆＃34;旧值＆＃34;因为它在onload回调之前执行。由于异步代码的神奇之处，执行顺序概述如下：

// 1: Declare variables
var img = new Image();
var url = 'some url';
var value = 'old value';

// 2: Assign callback
img.onload = function () {
  // 4: Update value
  value = 'new value';
};

// 3: Alert value
alert(value);

如果您不相信我，请在警报中添加延迟：

// THIS IS BAD CODE. It's just to prove that your callback is executing.
setTimeout(function () {
  alert(value);
}, 10000);

只要您的图片加载时间不超过10秒，就可以获得您期望的输出。

Answer 3

onload之后的代码在执行之前不会等待它完成。

var value = 'old value';

img.onload = function () { // image did not load yet, still waiting
    // do something
    value = "New value"
};

alert(value); // doesn't care if onload is done or not

由于onload在显示alert()之前未执行，因此值未发生变化。你需要一个回调或类似的东西

var value = 'old value';

img.onload = function () {
    // do something
    value = "New value"

    imageLoaded();
};

function imageLoaded() { // or just give the value as parameter
    alert(value);
}

无法在image.onload中生成输出

3 个答案: