Question

让我的问题变得严厉：

这是我的代码：

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

Answer 1

你不能从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);
    }
);

如何在jquery中的img.onload = function（）中返回一个变量？

1 个答案: