为何google.script.run调用的服务器端函数会10秒后重复触发？

问题描述 #

你在Google表格绑定脚本中遇到以下问题：

• 使用HTML对话框收集用户输入，提交后立即关闭对话框，异步执行服务器端处理
• 当服务器端处理耗时超过10秒时，processForm()函数会被自动调用第二次，两次调用间隔恰好10秒
• 已确认客户端handleSubmit()仅执行一次，但服务器端函数重复触发

根因解析 #

这个现象源于Google Apps Script的google.script.run异步调用机制：

1. 默认超时限制：google.script.run存在默认10秒的超时阈值，当客户端在10秒内未收到服务器响应时，会自动重试调用
2. 对话框关闭导致的连接中断：提交后立即用google.script.host.close()关闭对话框，会终止客户端与服务器的连接，使得客户端无法接收服务器的处理状态，进而触发超时重试

另外，你的代码中未阻止表单的默认提交行为，虽然你确认handleSubmit()仅执行一次，但这可能加剧潜在的请求重复风险。

解决方案 #

方案1：阻止表单默认提交行为 + 延长超时时间 #

修改客户端HTML代码，阻止表单默认提交，并为google.script.run设置更长的超时时间：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleSubmit(event)">
      <input type="submit" id="submitButton" value="Submit">
    </form>
    <script>
      function handleSubmit(event) {
        // 阻止表单默认提交行为
        event.preventDefault();
        console.log("handleSubmit invoked at:", new Date().toISOString());
        
        // 配置google.script.run的超时时间（例如30秒）
        google.script.run
          .withTimeout(30000)
          .processForm();
        
        // 关闭对话框
        google.script.host.close();
      }
    </script>
  </body>
</html>

方案2：改用时间驱动触发器执行长耗时任务 #

对于超过10秒的处理任务，更可靠的方式是通过时间驱动触发器异步执行，避免依赖google.script.run的客户端连接：

服务器端代码修改：

var ui;

function onOpen(e) {
  ui = SpreadsheetApp.getUi();
  ui.createAddonMenu()
    .addItem('test', 'test')
    .addToUi();
}

function test() {
  ui = SpreadsheetApp.getUi();
  var html = HtmlService.createHtmlOutputFromFile('Input');
  ui.showModalDialog(html, 'Input');
}

// 触发长耗时任务的函数
function triggerLongProcess() {
  // 创建1分钟后执行的触发器（可根据需要调整延迟）
  ScriptApp.newTrigger('processForm')
    .timeBased()
    .after(60000)
    .create();
}

// 实际处理函数
function processForm() {
  Logger.log('in processForm');
  Utilities.sleep(15000);      
  return;
}

客户端代码修改：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleSubmit(event)">
      <input type="submit" id="submitButton" value="Submit">
    </form>
    <script>
      function handleSubmit(event) {
        event.preventDefault();
        console.log("handleSubmit invoked at:", new Date().toISOString());
        
        // 调用触发器创建函数
        google.script.run.triggerLongProcess();
        
        google.script.host.close();
      }
    </script>
  </body>
</html>

方案3：保留对话框直到确认服务器接收请求 #

如果允许对话框短暂停留，可以等待服务器确认收到请求后再关闭对话框：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleSubmit(event)">
      <input type="submit" id="submitButton" value="Submit">
    </form>
    <script>
      function handleSubmit(event) {
        event.preventDefault();
        console.log("handleSubmit invoked at:", new Date().toISOString());
        
        google.script.run
          .withSuccessHandler(function() {
            // 服务器确认接收后关闭对话框
            google.script.host.close();
          })
          .processForm();
      }
    </script>
  </body>
</html>

注意：此方案仅适用于服务器能在合理时间内返回确认的场景，如果处理本身需要超过10秒，仍需结合超时配置。

内容的提问来源于stack exchange，提问作者Boris