javascript - 通过单击一个按钮调用两个 javascript 函数会得到与两个按钮不同的结果

Question

所以，我目前正在使用 webcam.js 来首先捕获图像的静态图像。然后，我编写了一些 java 脚本代码，将其传递给隐藏变量，以便我可以在后面的 ASP.NET 代码中获取它，以便将其保存到数据库中。这就是我的 JavaScript 代码:

<script src="webcam.js"></script>
<script>
    function transfer() {
        var c = document.getElementById("myCanvas");
        var dataURL = myCanvas.toDataURL("image/png");
        dataURL = dataURL.replace('data:image/png;base64,', '');

        var hf = document.getElementById('<%=hiddensquare.ClientID%>');
            hf.value = dataURL;

        }
</script>
<script>
    function take_snapshot() {
        Webcam.snap(function () {
        }, myCanvas);
    }
</script>

我使用两个 html 按钮来调用它们，这些按钮使用它们的 onclick 事件来调用它们，如下所示:

<input id="btnSnap" type="button" value="Take Snapshot" onclick="take_snapshot();" />
<input id="btnTran" type="button" value="Transfer" onclick="transfer();" />

以防万一这有什么关系，这就是我的隐藏变量的样子:

<asp:HiddenField ID="hiddensquare" runat="server" Value="" />

我想通过单击一个按钮(而不是两次)来调用这两个 javascript 函数。然而，当我尝试这样做时，例如，只需放入 take_snapshot();转移();在其中一个按钮的 onclick 中，或者创建一个新的 javascript 函数来调用这两个函数时，我总是得到比这样做要少得多的数据传递到隐藏变量中(我的意思是少于 1/10)我需要按两个 html 按钮才能保存。

有人知道这里发生了什么吗？谢谢!

Answer 1

问题在于 Webcam.snap() 是异步的，因此在执行 transfer() 时不一定完成。

幸运的是，snap 的第一个参数是一个回调函数，它将等到 snap 完成才执行，因此您可以简单地将 transfer 作为第一个参数传递给 snap，您应该会获得您想要的结果正在寻找:

function take_snapshot() {
        Webcam.snap(transfer, myCanvas);
    }