如何從javascript函數中獲取值？

Question

這是我的代碼。我想返回front_image的值，但返回空白字符串。

function get_front_image(callbackFunction){ 
    var front_image=""; 
    html2canvas($('#selector'), { 
     onrendered: function(canvas) { 
      front_image=canvas.toDataURL(); 
      callbackFunction(front_image); 
     } 
    }); 
} 

我試圖讓它的front_image值這樣

var f; 
    var a=get_front_image(function(value){ 
     f= value; 
    }); 
    alert(f);// it returns blank 

我怎樣才能得到這個函數這個數值請建議我的答案。 在此先感謝

Answer 1

在你的函數get_front_image你一個空字符串賦值給變量front_image，然後調用html2canvas功能，它有一個onrendered功能。這個函數被稱爲asynchronous，所以當你返回front_image變量時，onrendered函數還沒有被調用，這意味着front_image仍然是一個空字符串。

大部分時候做異步的東西，你會使用回調函數。在這裏，可能是這個樣子：

function get_front_image(callbackFunction){ 
    var front_image=""; 
    html2canvas($('#selector'), { 
     onrendered: function(canvas) { 
      front_image=canvas.toDataURL(); 
      callbackFunction(front_image); 
     } 
    }); 
} 

var f; 
get_front_image(function(value){ 
    f = value; 
    alert(f); //will return your value 
}); 
alert(f); //Wont alert your value 

要清楚以何種順序什麼的執行：

1. 瓦爾f的聲明var f;
2. get_fron_image被調用，並且html2canvas函數被調用。這是異步，所以onrendered功能將在它完成時調用，並且我們無法知道什麼時候會發生。
3. alert(f); //wont alert your value行被執行。由於onrendered函數還沒有被調用，f還沒有價值。
4. 最終，執行onrendered函數，並調用callbackFunction，其中alert(f);顯示您的值按預期方式。無論你想對變量f做什麼，都必須在回調函數中發生才能工作。

Answer 2

html2canvas onrendered將異步運行，屆時您的函數將返回未初始化的空var。

因此，我們必須對長時間運行的任務使用回調函數。你可以像下面這樣實現你的功能。

function get_front_image(callback){ 
html2canvas($('#selector'), { 
    onrendered: function(canvas) { 
     var url = canvas.toDataURL(); 
     callback(url); 
    } 
}); 
} 

然後調用該函數如下。

get_front_image(function(link){ 
alert(link); 
});