如何从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); 
});