在这种情况下如何实现回调函数
在这种情况下如何实现回调函数
提问于 2015-11-21 21:08:23
我刚开始使用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];回答 3
Stack Overflow用户
回答已采纳
发布于 2015-11-21 21:25:05
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!
// {{3}}
runProgram()
});
//{{1}}
alert(dimensions) // undefined
function runProgram(){
alert(dimensions) //works!
//continue here...
}Javascript是一种单线程语言，因此在{{1}}处运行的代码总是在{2}和{3}之前运行--这是因为load()函数是异步的-例如:将只在加载映像时运行。
所以当你说“getMeta外”时，你基本上是说-在图像加载之前
这就是为什么在javascript中，当我们想要“返回”一些需要异步方式的东西(比如图像加载)时，我们使用回调。
Stack Overflow用户
发布于 2015-11-21 21:14:56
使用回调只分配结果对您没有帮助。回调的目的是等待结果可用，所以您必须在回调中使用结果。
只需将宽度和高度作为参数发送到回调。这是您需要的所有代码：
function getMeta(url, callback){
$('<img/>').attr('src', url).load(function(){
callback(this.width, this.height);
});
}
getMeta(imageURL, function(imageWidth, imageHeight) {
// use the image size
});Stack Overflow用户
发布于 2015-11-21 21:15:04
如前所述，回调返回width和height，然后在回调中使用这两个参数，如下
.load(function(width, height){
size = {w:width, h:height};
});也可以是
.load(function(dimensions){
size = {w: dimensions.width, h: dimensions.height};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33848591
复制相关文章
相似问题
腾讯云开发者
