如何从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函数。 这个函数被称为异步 ，所以当你返回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. Var f声明为var f;
2. get_fron_image ，调用html2canvas函数。 这是异步的 ，因此onrendered函数将在它完成时被调用，我们无法知道何时会发生这种情况。
3. alert(f); //wont alert your value alert(f); //wont alert your value线被执行。 由于还没有调用onrendered函数， f还没有值。
4. 最后，执行onrendered函数，并callbackFunction ，其中alert(f); 按预期显示您的价值。 无论你想用变量f做什么都必须在callbackFunction中进行才能工作。

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);
});