如何在這種情況下實現回調函數

我是新來的JS回調函數。看了幾個例子，但不能解決這個案例。如何在這種情況下實現回調函數

我想將width和height變量分配給dimensions數組。寬度和高度由函數返回，因此需要回調。

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];

來源

2015-11-21 bbking7

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}} - 這是因爲負載（）函數的其是異步的 - 例如：只會在圖像加載時運行。

所以，當你說「外面getMeta」你基本上是說 - 圖像加載

這就是爲什麼在JavaScript中，我們使用回調的時候，我們要「回報」的東西，需要異步的方式之前 - 如圖像加載。

來源

2015-11-21 21:25:05 yosiweinreb

謝謝。你將如何從Meta獲取imageWidth和imageHeight？這是我的最終目標。我試圖讓這些變量是全局的，但如果我在getMeta之外提醒它們仍然會得到'undefined' – bbking7

爲您的評論添加更多解釋 – yosiweinreb

所以基本上，如果我想進一步使用imageWidth和imageHeight，那麼我必須將代碼它在{3}內部使用它們？ – bbking7

使用回調只是分配的結果並不能幫助你。回調的目的是等待結果可用，因此您必須在回調中使用結果。

只需將寬度和高度作爲參數發送到回調。這是所有你需要的代碼：

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

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

來源

2015-11-21 21:14:56 Guffa

正如你所說，回調函數返回width和height然後在回調使用這兩個參數，像

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

，也可以是

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

來源

2015-11-21 21:15:04

如何在這種情況下實現回調函數

回答

相關問題