Question

我试图通过使用下面的代码来获取图像的宽度，但问题是，我无法检索函数内部的变量。

var get_image_h_w = new Image();
var width;
                        get_image_h_w.onload = function() {
                          width = get_image_h_w.width;
                        }
                        get_image_h_w.src = img_link_url;

alert(width);

Answer 1

在.onload运行后，alert(width)处理程序将在稍后执行。它会在运行时设置变量width，但知道何时发生的唯一可靠方法是将想要在width处理程序中使用onload值的代码放入或调用来自onload处理程序。这是异步回调的一个示例，这意味着当事件发生时，它与代码的其余部分“不同步”。

var get_image_h_w = new Image();
get_image_h_w.onload = function() {
    alert(this.width);
    // you can call some code here that wants to use this width
    // and pass the width to that function
    callYourFunction(this.width);
}
get_image_h_w.src = img_link_url;

注意：我还切换到使用this.width，其中this是创建onload事件的对象。这与你的方式没有什么不同，但它通常更有用，特别是当你想让同一个事件处理程序为多个对象工作时，这是一个很好的做法。

Answer 2

变量width很可能在调用alert时永远不会保持图像宽度，因为onload事件在触发之前不会暂停执行。您只是将函数分配给onload事件。 onload事件不会马上开火。它会在图像完成加载时触发，这可能在执行到达警报之后很好。

尝试在onload事件中放置一个回调函数，该函数将使用新设置的变量。

get_image_h_w.onload = function() {
    width = get_image_h_w.width;
    finishedLoading();
}

var finishedLoading = function () {
   var w = width; // width will be set here
}

如何在javascript中获取函数内部的变量

2 个答案: