如果onsubmit函数运行时间超过10秒，则HTML表单提交两次

如何解决如果onsubmit函数运行时间超过10秒，则HTML表单提交两次

我为此奋斗了整整一整天，发现的搜索结果都对我没有帮助。

我正在Google表格中编写脚本，并在Windows 10 OS上使用Chrome浏览器。我至少需要在Chrome中运行它，因为我的公司大多数都使用Chrome。

当我的代码完全生效时，一切正常，但是html表单中的onsubmit操作调用了我的TWICE中的函数，我不知道为什么。

我所看到的是；不管我的html文件或gs函数中的内容是什么，如果我的函数执行需要十秒钟或更长时间，那么它将被第二次调用。怎么会这样我在做什么错了？

一步一步，这就是我在做什么和会发生什么。

首先，通过附加菜单，我调用初始函数，该函数会生成包含表单的HTML模型窗口。

function importPool() {
var ui = SpreadsheetApp.getUi();
var html = HtmlService.createHtmlOutputFromFile("importPool")
.setWidth(750)
.setHeight(300);
var dialog = ui.showModalDialog(html,"Import pool");
}

这将启动“ importPool.html”

<!DOCTYPE html>
<html>
<head>
<base target="_top">

</head><body>
<form id="myForm" onsubmit="processForm(myForm);">
    <div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
        <table width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #c0c0c0;">
    
            
            <tr valign="top">
                <td style="border-width : 0px;text-align: left"></td>
                <td style="border-width : 0px;text-align: right">
                    <input type="button" value="Cancel" onclick="google.script.host.close()"><input type="submit" value="Import">
      </td>
            </tr>
    
        </table>
    </div>
</form>
<script>
function processForm(formdata){
  google.script.run.processImport(formdata);
  google.script.host.close();
}
</script>
</body>

</html>

我单击我的“提交”按钮，这在我的gs中调用了processImport函数。为了测试目的，该功能仅包含

function processImport(form) {
Logger.log("I am running!");
Utilities.sleep(12000); 
}

正如我提到的，如果我减少了计时器，以便该函数执行不到十秒钟，则每次单击“提交”按钮时，该函数仅运行一次。但是，如果函数执行时间超过十秒钟，则在单击“提交”时，它将运行两次。它第一次正常运行，然后在运行时间几乎恰好十秒后再次从上到下执行该功能。

可能是什么原因造成的？我确信我做的事很愚蠢，但我找不到。请帮忙！

解决方法

改进建议

通过事件侦听器替换内联事件处理程序（onsubmit=和onclick=属性）
使用withSuccessHandler时使用withFailureHandler和google.script.run
在google.script.host.close()的回调中添加witchSuccessHandler
在<script></script>的开头添加以下内容

// Prevent forms from submitting.

  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit',function(event) {
        event.preventDefault();
      });
    }
  }
  window.addEventListener('load',preventFormSubmit);

来自https://developers.google.com/apps-script/guides/html/communication#forms

请注意，加载页面中的所有表单后，默认情况下都会提交由preventFormSubmit禁用的操作。这样可以防止页面发生异常时重定向到错误的URL。

来自Introduction to events

您可以找到许多事件处理程序属性的HTML属性等效项。但是，您不应该使用这些-它们被认为是不好的做法。如果您只是在快速地做某事，使用事件处理程序属性似乎很容易，但是它们很快变得难以管理且效率低下。

请记住，google.script.run调用是异步的（它们之后的代码将在服务器端函数结束之前执行）

如果onsubmit函数运行时间超过10秒，则HTML表单提交两次

如何解决如果onsubmit函数运行时间超过10秒，则HTML表单提交两次

解决方法

相关推荐