如何在jQuery中返回img.onload = function（）中的变量？ [英] how to return a variable inside img.onload = function() in jquery?

问题描述

这里是我的代码：

 <$> $ p 
 $ b $ p 
 c $ c> function inside（）
 {
 var gallery = $（＃gallery）; 
 var photo = $（＃photo）; 
 var width_mask = gallery.width（）; //定义遮罩的宽度
 var height_mask = gallery.height（）; //定义遮罩的高度
 var img = new Image（）; 
 img.onload = function（）{
 var width_image = this.width; 
 var height_image = this.height; 
 var img_src = img.src; （（width_image / width_mask）> =（height_image / height_mask））
 {
 height_image =（（width_mask / width_image）* height_image）; 
 width_image = width_mask; （（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

解决方案 div>

你不能从onload返回一个值，因为它是一个异步回调。

你可以，但没有意义，因为它是浏览器谁调用了onload（）回调函数，并且对它的返回值没有兴趣。

异步=不会立即完成，但是在将来的某个时刻

同步=立即完成

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

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

如果你这样调用inside（）函数：

 （）; 
  

只要您异步执行，您可以从onload返回一个值（或任何其他值）。你可以做这些修改：

  function inside（imageLoadedCb）{
 // ... 
 
 img.onload = function（）{
 // ... 
 
 //通知内部（）的调用者图像已加载，其中包含我们想要的值返回
 imageLoadedCb（top_margin，left_margin）; 
 
 
 
里面（
 //这是一个函数引用，它以inside函数中的imageLoadedCb变量结尾
函数（top_margin，left_margin）{
 //从onload（）回调中调用此代码
 console.log（'top_margin ='+ top_margin +'left_margin ='+ left_margin）; 
 } 
）; 
  

Let's get strait to my question:

here is my code:

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');
}

Ok, as you can see this is my function... here is my question: how I can return "top_margin" and "left_margin" variables inside my img.onload function?

Well, actually I know how we can return variables in a function but in this onload function it seems that it just doesn't work :(

Excuse me, I'm a little beginner in Javascript... any help would be so much appreciated.

Thanks a lot, Naghme

解决方案

You cannot "return a value" from onload, because it's an asynchronous callback.

Well you can, but there is no point, since it's the browser who invokes the onload() callback, and is not interested in its return value.

Asynchronous = Will not be done immediately, but at some point in the future

Synchronous = Will be done immediately

Asynchronicity is dealt with using callbacks. A callback is a mechanism that works by passing a function to another function, so the callee function can inform the caller code about the work being completed, at some time in the future.

If the function worked synchronously, it could simply return the values without a callback. But the drawback would be that the code calling your function would have to wait for the image to be loaded from the server, which could take a long time and would make your program freeze for a long time if the response from the server takes a long time. You don't want to do that.

If you call the inside() function like this:

inside();

You can return a value (or anything) from the onload, as long as you do it asynchronously. You can do it by making these modifications:

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（）中的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！