如何确保重新验证码js文件在提交表单之前已被加载？

Question

我有一个recaptcha和注册表单。这里有一个处理程序的简单版本：

//my_script.js 

    document.getElementById("my_form").onsubmit = function(e) { 
    e.preventDefault(); 
    grecaptcha.execute(); 
    var grecap_resp = grecaptcha.getResponse(); 
    if (grecap_resp.length !== 0) { 

而且js文件：

<script src="my_script.js"></script> 
<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

有时候，我不得不两次单击提交按钮。 我相信这是由于我点击按钮时“recaptcha/api.js”还没有加载。 正如我所看到的，当它被加载时，一切运行良好。

我该如何解决这个问题？

Answer 1

作为the docs say，你可以传递一个onload参数与函数的名字，当被加载时被调用：

<script src="my_script.js"></script> 
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded&render=explicit" async defer></script> 

而且你my_script.js内：

window.recaptchaLoaded = function() { // "window..." so is defined on the global scope 
    console.log("Yay! captcha loaded"); // Here you should add your logic to show/enable the button that is disabled/hidden by default. 
}