这种情况下如何实现回调函数

Question

我是 JS 回调函数的新手。查看了几个示例，但无法解决这种情况。

我想将 width 和 height 变量分配给 dimensions 数组。宽高由.load()函数返回，需要回调

  var size; // undefined var
var dimensions = [];

function getMeta(url){

  $('<img/>').attr('src', url).load(function(){
     size = {w:this.width, h:this.height};
     //myDelayedFunction();
     //var imageDimendions = [];
     var imageDimendions = myDelayedFunction();        

     var width = imageDimendions[0];
     var height = imageDimendions[1];

     dimensions.push(width);
     dimensions.push(height);
     //alert(width); //works fine here
    //alert(height); //works fine here


  });

  alert(dimensions); //alerts "undefined"
  return dimensions;
}

function myDelayedFunction(){
    //var imageDimensions = array();
    var width  = size.w;
    var height = size.h;
    var imageDimensions = [];
    imageDimensions.push(width);
    imageDimensions.push(height);
    //alert(imageDimensions);
    return imageDimensions;

}

var imageDimensions = getMeta(imageURL);
var imageWidth = imageDimensions[0];
var imageHeight = imageDimensions[1];

Answer 1

仅使用回调来分配结果对您没有帮助。回调的目的是等待结果可用，所以你必须在回调中使用结果。

只需将宽度和高度作为参数发送给回调即可。这是您需要的所有代码：

function getMeta(url, callback){
  $('<img/>').attr('src', url).load(function(){
     callback(this.width, this.height);
  });
}

getMeta(imageURL, function(imageWidth, imageHeight) {
  // use the image size
});

Answer 2

如您所说，回调 returns width 和 height 然后在回调中使用这两个参数，例如

.load(function(width, height){
     size = {w:width, h:height};
});

或者可以是

.load(function(dimensions){
     size = {w: dimensions.width, h: dimensions.height};
});

Answer 3

加载参数函数为回调函数，异步执行

您需要向 getMeta 添加一个回调参数函数，并在 load() 将执行的回调函数上执行它。

function getMeta(url, callback){

  $('<img/>').attr('src', url).load(function(){
     //{{2}}
     size = {w:this.width, h:this.height};

     dimensions.push(size.w);
     dimensions.push(size.h);
     callback(dimensions)


  });



}

getMeta(imageURL,function(imageDimensions){
    var imageWidth = imageDimensions[0];
    var imageHeight = imageDimensions[1];
    alert(dimensions) // works!
    // {{3}}
    runProgram()
});
//{{1}}
alert(dimensions) // undefined


function runProgram(){
   alert(dimensions) //works!
   //continue here...
}

Javascript 是单线程语言，因此在 {{1}} 处运行s 的代码将始终在 {{2}} 和 {{3}} 之前运行 - 这是因为 load() 函数是异步的 - 例如：只有在加载图像时才会运行。

所以当你说 "Outside getMeta" 你基本上是在说 - 在图像加载之前

这就是为什么在 javascript 中，当我们想要 "return" 需要异步方式的东西时使用回调 - 例如图像加载。

这种情况下如何实现回调函数

How to implement callback function in this case

javascript

jquery

asynchronous

callback

jquery-callback