javascript - 同步执行 Jquery 绑定(bind)

Question

我目前正在 each() 语句中获取一些图像的大小。

我正在将一个函数绑定(bind)到它的加载事件。尽管如此，我需要它在继续执行代码之前获取图像高度。

$(window).load(function () {

      $("element").each( function() {
            /*
            .
            .
            .
            .
            */
            var containerHeight = $(this).height();
            var imgHeight = 0;

            //get the size of the full image.
            var imgLoad = $("<img />");
            imgLoad.attr("src", imgSrc);
            imgLoad.bind("load", function () { imgHeight = this.height; });

            heightDiff = (imgHeight - containerHeight);

            //some methods are called...
            //imgHeight is still set to 0
      });
});

我考虑过使用.trigger("custom-event")

然后检查是否使用 Jquerys .when() 方法调用

但是有没有更简单(如果不是更好)的方法来做到这一点？

问候，

Answer 1

如此经典"how can I return values from an asynchronous function"问题。

你不能，就这样。使用回调。

$("element").each(function () {
    var containerHeight = $(this).height(),
        imgSrc = "something";

    $("<img />", { src: imgSrc })
    .appendTo("#whatever")
    .on("load", function () { 
        var $img = $(this),
            heightDiff = ($img.height() - containerHeight);

        //some methods are called...
    });
});