Javascript 限制窗体外观和应用自定义窗体处理程序之间的延迟

我有一个HTML表单的工作原型，在谷歌表单的侧栏中工作。如果我在运行脚本后等待大约30秒，那么一切都正常，否则submit按钮和整个表单就会消失

如屏幕截图所示，整个过程只是一个简单的HTML表单，带有提交按钮和一张图片作为按钮。按钮正在运行函数

loadSideBar（）

，单击后，我必须等待30秒才能正确使用表单。否则，整个表单将消失，并且不会在表单中写入任何内容

有没有机会取消这个等待时间

代码G.gs：

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()


function onOpen()
{
  SpreadsheetApp.getUi().createMenu('My Tools')
    .addItem('createTextEntryForm', 'createTextEntryForm')
    .addToUi();

  loadSideBar();
  SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();  
}


function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

function loadSideBar()
{
  var userInterface=HtmlService.createHtmlOutputFromFile('index');//sidebar for html and formBar for form
  SpreadsheetApp.getUi().showSidebar(userInterface);

 // doPost ();


}

index.html：

<form name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <input name="firstName" type="text" placeholder="First Name">
  <input name="lastName" type="text" placeholder="Last Name">
  <BR>
  <BR>
  <button type="submit">Send</button>
</form>

<script src="https://wzrd.in/standalone/formdata-polyfill"></script>
<script src="https://wzrd.in/standalone/promise-polyfill@latest"></script>
<script src="https://wzrd.in/standalone/whatwg-fetch@latest"></script>

<script>
  const scriptURL = 'https://script.google.com/macros/s/AKfycbx0rzbLMsXKQ1C3--qP-wHtcFdfvmOG--y_Qpk0xc43EqtUdSeF/exec'
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })
</script>

发送
常量脚本URL=https://script.google.com/macros/s/AKfycbx0rzbLMsXKQ1C3--qP-wHtcFdfvmOG--y_Qpk0xc43EqtUdSeF/exec'
const form=document.forms['submit-to-google-sheet']
form.addEventListener（'submit'，e=>{
e、 预防默认值（）
fetch（scriptURL，{method:'POST'，body:newformdata（form）}）
.then（response=>console.log（'Success！'，response））
.catch（error=>console.error（'error！'，error.message））
})

延迟的原因是表单在脚本加载完成之前很久就出现了。简单的解决方案：在添加事件侦听器之前不要显示表单。更好的解决方案：重写HTML以避免需要在外部库中加载，因为它们几乎肯定是缓慢加载的原因。您好，感谢您的回复和解释。你有没有可能知道如何实现这一点的任何例子/类似线索？我担心这是我能用我的基本技能做到的最好的了。尽管如此，我已经删除了用于优化的外部脚本，它现在运行得更快了。感谢您找出根本原因。