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

load参数函数是回调函数，它正在异步执行。

您需要向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!
    // https://www.applovin.com/integration#iosIntegration
    runProgram()
});
//<img src="/boh/boh/public/img/angel wing.jpg" class="wings" id="leftWing">
<button class="buttons">Login</button>
<button class="buttons">Register</button>
<img src="/boh/boh/public/img/devil wing.jpg" class="wings" id="rightWing">

alert(dimensions) // undefined


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

Javascript是一种单线程语言，因此在#leftWing { margin-right: -4vw; display: inline-block; } #rightWing { margin-left: -4vw; display: inline-block; } .buttons { margin: 1.2vh 0; height: 2.4vh; width: 4.5vw; text-align: center; display: block; }运行的代码将始终在

val stringList = List("1","2","foo","4")
val parsed = stringList.map(s => scala.util.Try(s.toDouble)).filter(_.isSuccess).map(_.get)

和Optimal AI for 2048之前运行 - 这是因为load（）函数是异步的 - 例如：仅在加载图像时运行。

所以当你说＆＃34;外面的getMeta＆＃34;你基本上说 - 在图像加载之前

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

Answer 2

使用回调来分配结果并不能帮助您。回调的目的是等到结果可用，因此你必须在回调中使用结果。

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

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 3

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

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

或者可以是

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

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

3 个答案: