无法在image.onload内生成输出

之后的代码 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

自从 超载 在 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);
}

问题是,内部的函数 img.onload 在alert(value);`之后执行。

时间线:

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

如果您键入 value 在加载图像后,它应该是“新值”。

根据您的代码 alert 将显示“旧值”,因为它在 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秒,这将为您提供预期的输出。