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

Question

我花了一整天的时间来解决这个问题，none 我找到的搜索结果对我有帮助。

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

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

我看到的是；无论我的 html 文件或 gs 函数中的内容如何，如果我的函数需要十秒或更长时间才能执行，那么它会被第二次调用。这怎么可能？我做错了什么？

一步一步，这是我正在做的以及发生的事情。

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

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

正如我所提到的，如果我减少计时器以使函数执行时间少于十秒，则每次单击“提交”按钮时函数仅运行一次。但是，如果函数执行时间超过 10 秒，当我单击“提交”时，它是运行两次。它运行第一次像往常一样，然后在运行时几乎整整十秒它再次执行该函数，从上到下。

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

Answer 1

改进建议

用事件侦听器替换内联事件处理程序（onsubmit= 和 onclick= 属性）
在使用google.script.run

withSuccessHandler

withFailureHandler

在witchSuccessHandler

google.script.host.close()

在 <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

Note that upon loading all forms in the page have the default submit action disabled by preventFormSubmit. This prevents the page from redirecting to an inaccurate URL in the event of an exception.

来自Introduction to events

You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

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

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

HTML form submits twice if the onsubmit function runs longer than 10 seconds

javascript

forms

form-submit

google-sheets

google-apps-script