无法在image.onload中产生输出

Not able to produce output inside image.onload

本文关键字：输出 onload image      更新时间：2023-09-26
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函数不能全局使用?

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);
}

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

时间表:

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

如果您在加载图像后在浏览器控制台中输入value，它应该是"new 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秒，这应该会给你期望的输出。

相关文章：