1

让我们直面我的问题：

这是我的代码：

function inside()
{
    var gallery = $("#gallery");
    var photo = $("#photo");
    var width_mask = gallery.width();    //defines width for mask
    var height_mask = gallery.height();  //defines height for mask
    var img = new Image();
    img.onload = function() {
        var width_image = this.width;
        var height_image = this.height;
        var img_src = img.src;
        if((width_image/width_mask)>=(height_image/height_mask))
        {
            height_image = ((width_mask/width_image)*height_image);
            width_image =  width_mask;
        }
        else if((width_image/width_mask)<(height_image/height_mask))
        {
            width_image = ((height_mask/height_image)*width_image);
            height_image = height_mask;
        }
        var top_margin = (height_mask - height_image)/2;
        var left_margin = (width_mask-width_image)/2;
        photo.css({
            marginTop : top_margin,
            marginLeft: left_margin,
            marginRight: left_margin
        });
        photo.attr('src',img_src);
        photo.attr('width',width_image);
        photo.attr('height',height_image);
        gallery.css({
            width : width_mask,
            height : height_mask
        });
    };
    img.src = photo.attr('src');
}

好的，正如您所看到的，这是我的函数......这是我的问题：如何在 img.onload 函数中返回“top_margin”和“left_margin”变量？

好吧，实际上我知道我们如何在函数中返回变量，但是在这个 onload 函数中，它似乎不起作用:(

对不起，我是 Javascript 的一个小初学者......任何帮助都会非常感激。

非常感谢， Naghme

4

1 回答 1

2

您不能从 onload 中“返回值”，因为它是异步回调。

好吧，你可以，但没有意义，因为调用 onload() 回调的是浏览器，并且对它的返回值不感兴趣。

异步 = 不会立即完成，但会在未来的某个时间完成

同步 = 将立即完成

使用回调处理异步性。回调是一种通过将函数传递给另一个函数来工作的机制，因此被调用函数可以在将来的某个时间通知调用者代码正在完成的工作。

如果函数同步工作，它可以简单地返回值而无需回调。但缺点是调用您的函数的代码必须等待从服务器加载图像，这可能需要很长时间，如果服务器的响应需要很长时间，您的程序会冻结很长时间时间。你不想那样做。

如果你像这样调用 inside() 函数：

inside();

你可以从 onload 中返回一个值（或任何东西），只要你异步执行它。您可以通过进行以下修改来做到这一点：

function inside(imageLoadedCb) {
    // ...

    img.onload = function () {
        // ...

        // notify the caller of inside() that image was loaded, with the values we want to return
        imageLoadedCb(top_margin, left_margin);
    }
}

inside(
    // this is a function reference. it ends up in "imageLoadedCb" variable in "inside" function
    function (top_margin, left_margin){
        // this code gets invoked from inside the onload() callback
        console.log('top_margin= ' + top_margin + ' left_margin= ' + left_margin);
    }
);
于 2013-11-02T17:27:19.967 回答