Question

我处于需要以这种方式解决的情况;需要将local variable转换为global variable。有一个示例返回图像的实际宽度和高度，我从this answer.找到了这些方法。

需要将本地变量pic_real_height和pic_real_width转换为全局变量并返回其真值。

CSS：

img { width:0px; height:0px; }

jQuery：

console.log($('.imgCon img').height());//returns 0

var img = $('.imgCon img')[0]; // Get my img elem
var pic_real_width, pic_real_height;
$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
});
//problem starts here:
console.log( pic_real_width + 'x' + pic_real_height );
//returns undefined
// need to return this as an global variable 570x320

Answer 1

这一行，

console.log( pic_real_width + 'x' + pic_real_height );

不等待这些行

    pic_real_width = this.width;   
    pic_real_height = this.height;

    console.log( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 --

执行，因为它是异步的。

因此， console.log( pic_real_width + 'x' + pic_real_height );在调用回调函数之前执行（即在设置width和height之前）。

因为你还没有定义它们，所以它们会显示undefined。

一个简单的解决方案，

$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
        restOfMyProcessing();

}); 

function restOfMyProcessing() {
    console.log( pic_real_width + 'x' + pic_real_height );
}

Answer 2

在图像加载事件中设置之前，您尝试使用pic_real_width和pic_real_height 与您的代码一样，第一个alert( pic_real_width + 'x' + pic_real_height )是图像加载函数之后的一个返回undefined而加载事件中的第二个alert返回您期望的结果。
虽然最好在加载功能/事件后移动源属性的设置：

$('<img/>')
.load(function() {
    pic_real_width = this.width;
    pic_real_height = this.height;

    alert( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 --
    //now continue process here or call another function...
})
.attr('src', $(img).attr('src'));

jQuery：如何访问外部变量？

2 个答案: