为什么javascript函数的返回值未定义?

我有一个函数来检测图像的大小,我希望它返回一个包含宽度和高度的对象。 在下面的代码中,函数中的sz.width和sz.height保存值,但在返回值后,它是未定义的。 我错过了什么?

function getImgSize(imgSrc) { var newImg = new Image(); newImg.onload = function() { var height = newImg.height; var width = newImg.width; function s() {} sz = new s(); sz.width = width; sz.height = height; $('#infunc').text("in function, w = "+sz.width+", h = "+sz.height); return sz; } newImg.src = imgSrc; // this must be done AFTER setting onload } var sz = getImgSize("http://lorempixel.com/output/fashion-qc-1920-1920-4.jpg"); $('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height); 

jsfiddle: http : //jsfiddle.net/forgetcolor/LbxA3/

函数getImgSize设置图像加载然后终止。 稍后,当图像加载时,将调用匿名onload函数并正确计算大小,然后将其返回给不受欢迎的DOM引擎…

你可能想知道如何做你想做的事。 简答:你不能。 这是你能得到的最接近的:

  function getImgSize(imgSrc, callback) { var newImg = new Image(); newImg.onload = function() { ... // blah-blah blah callback(sz); } newImg.src = imgSrc; } getImgSize("http://lorempixel.com/output/fashion-qc-1920-1920-4.jpg", function(sz) { $('#outfunc').text("in callback, w = "+sz.width+ ", h = "+sz.height); }); 

我其实是来这里写的:

//这必须在设置onload后完成

这就是我打赌你的问题。 //这必须在设置onload后完成

它无法完成。 您正在尝试获取异步调用的返回值。

考虑:

 var i = 0; setTimeout(function() { i = 1; }, 1000); //1 second later alert(i); 

这将提醒0因为该值仅在一秒内改变而不是立即改变。

不相信我?

你要做的是同样的事情。 你不能使用尚未发生的价值。 为了完成你想要的,你需要使用回调。