为什么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-q-c-1920-1920-4.jpg");
$('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height);

---

jsfiddle:

这是不可能的。您正在尝试获取异步调用的返回值

考虑：

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

这将提醒

0

，因为该值仅在一秒钟内更改，而不是立即更改

---

你想做的是同一件事。您不能使用尚未发生的值。为了完成您试图完成的任务，您需要使用回调。

函数

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-q-c-1920-1920-4.jpg",
            function(sz) {
              $('#outfunc').text("in callback, w = "+sz.width+
                                 ", h = "+sz.height);
            });

事实上，我来这里是为了写：

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

这就是我打赌你的问题所在。

---

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

您不是第一个尝试在顺序上下文中使用异步代码的人。也不是最后一个：）除此之外，您不会返回任何内容，映像加载函数不会在映像加载后运行，而getImgSize会在加载之前返回吗？（我不确定图像加载是如何工作的。）