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

要明确执行的内容：

Var f声明为var f;
get_fron_image，并调用html2canvas函数。这是异步，因此onrendered函数将在完成时调用，我们无法知道何时会发生这种情况。
执行alert(f); //wont alert your value行。由于尚未调用onrendered函数，f尚未有值。
最终执行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);
});

如何从javascript函数中获取价值？

2 个答案: