Google App Script setTimeout 函数问题答案

【问题标题】：Google App Script setTimeout Function problemGoogle App Script setTimeout 函数问题
【发布时间】：2020-01-08 23:03:24
【问题描述】：

我有一个典型的 Google App Html 表单，用于记录在电子表格中输入的数据。这是文件。

HTML 表单：

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

    <?!= include("css");?>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message"></div>

  <!--- BUTTON New registration --->
    <br /><input id="button-responder" type ="button" value = "New registration"   
            onclick="submitResponder('button-responder'),
            submitTransition('message');" style="display:none;" />

  <!--- FORM --->   
   <form id="my-form">
    <br /><input id="name" type="text" name="name" placeholder="Your Name">
    <br /><input id="email" type="email" name="email" placeholder="Your Email">
    <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
   <!--- BUTTON submitForm ---> 
    <br /><input id="btn" type="button" value="Submit"
            onclick="submitForm(this.parentNode),
            document.getElementById('my-form').style.display='none',
            submitResponder('button-responder'),submitTransition('message');" />
   </form>
    <?!= include("test-js");?>  
  </body>
</html>

谷歌脚本：

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


function submitData(form) {
  var subject='New Feedback';
  var body=Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);

  var folderId = "my-folder-ID"; // Please set the folder ID.  // Added

  var blob = Utilities.newBlob(body, MimeType.HTML, form.name).getAs(MimeType.PDF);  // Added
  var file = DriveApp.getFolderById(folderId).createFile(blob);  // Added

  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s<br />
  PDF: <a target="_blank" href="%s">see your PDF file</a>',  
  form.name,form.email,form.comment,file.getUrl());

function userClicked(userInfo){
  var url = "https://docs.google.com/spreadsheets/d/my-spreadsheet-ID";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  ws.appendRow([userInfo.name, userInfo.email, userInfo.comment]);
}

test-js

<script>

  function submitForm(form) {
    google.script.run
     .withSuccessHandler(function(value){
       document.getElementById('message').innerHTML = value;
       document.getElementById('name').value = '';
       document.getElementById('email').value = '';
       document.getElementById('comment').value = '';
      }) 
      .submitData(form);
  }

  function submitResponder() {
    var x = document.getElementById("button-responder");
    var xx = document.getElementById("my-form");
    var xxx = document.getElementById("message");
    if (x.style.display === "none") {
      x.style.display = "block";
      xx.style.display = "none";
      xxx.style.display = "block";
    } else {
      x.style.display = "none";
      xx.style.display = "block";
      xxx.style.display = "none";
    }
  }


  function submitTransition() {
    setTimeout(function() {
     document.getElementById('message').style.color = 'blue';}, 2500);
  }


document.getElementById("btn").addEventListener("click",doStuff);
  
  function doStuff(){
    var userInfo = {}
    userInfo.name = document.getElementById("name").value;
    userInfo.email = document.getElementById("email").value;
    userInfo.comment = document.getElementById("comment").value;
  

    google.script.run.userClicked(userInfo);
    document.getElementById("name").value= "";
    document.getElementById("email").value= "";
    document.getElementById("comment").value= "";     
  }

</script>

css：

<style>

 #message {
  color: transparent;
 }

</style>

问题

现在在 Google Script 文件功能中

函数 submitData（表单）

并在test-js文件函数中

函数doStuff()

他们的工作做得很好，但延迟约为 2.5 秒然后让谷歌脚本归档函数

返回 Utilities.formatString

可以显示结果（姓名 - 电子邮件 - 评论 - PDF Url）必须等待它的结论，2.5s。

变量中的函数。

在test-js文件函数中

函数submitResponder()

通过变量使链接到 ID（消息）的字段可见

name: example-name
email: example-email
comment: example-comment
PDF: see your example-PDF file

和链接到 ID 的字段（按钮响应）
“新注册”按钮

然后在加载 index.html 页面时显示表格和“提交”按钮，通过单击提交来编辑字段表单被隐藏，出现“新注册”按钮大约 2.5 秒后，编辑的字段（姓名-电子邮件 ....）也会出现。

点击下方的“新注册”按钮表单重新出现在开头，显然不是带有重新加载页面，而只是带有

display = "none"

display = "块"

现在这是我无法解决的问题：

通过重新编辑字段并再次单击提交表单上次编辑的字段立即再次出现

name: example-name
email: example-email
comment: example-comment
PDF: see your example-PDF file

大约 2.5 秒后，它们会更新为新编辑的字段

name: new-name
email: new-email
comment: new-comment
PDF: see your new-PDF file

现在有了函数

函数提交转换（）{ 设置超时（函数（）{ document.getElementById（'消息'）。 style.color = '蓝色';}, 2500); }

和风格

#message { 颜色：透明； }

我正在尝试找到一种解决方案来延迟（隐藏）旧字段的显示，直到新字段更新为止。

这肯定不是正确的方法。

希望我已经解释清楚了，你的帮助将非常有能力。

提前致谢。

【问题讨论】：

让成功处理程序调用格式化方法。将“用户对象”传递给异步调用，以便您的成功处理程序知道调用格式化程序需要哪些内容集

标签： javascript html css google-apps-script

【解决方案1】：

您想在点击“提交”按钮并完成submitData 的脚本后显示“新注册”的文本和按钮。

如果我的理解是正确的，那么这次修改呢？

您的问题的原因是 google.script.run 是使用异步进程运行的。这样，在submitData的脚本完成之前，document.getElementById('my-form').style.display='none'、submitResponder('button-responder')和submitTransition('message')就运行好了。

修改后的脚本：

请按如下方式修改您的脚本。

发件人：

<br /><input id="btn" type="button" value="Submit"
        onclick="submitForm(this.parentNode),
        document.getElementById('my-form').style.display='none',
        submitResponder('button-responder'),submitTransition('message');" />

收件人：

<br /><input id="btn" type="button" value="Submit" onclick="submitForm(this.parentNode)" />

和

发件人：

function submitForm(form) {
  google.script.run
   .withSuccessHandler(function(value){
     document.getElementById('message').innerHTML = value;
     document.getElementById('name').value = '';
     document.getElementById('email').value = '';
     document.getElementById('comment').value = '';
    }) 
    .submitData(form);
}

收件人：

function submitForm(form) {
  google.script.run
   .withSuccessHandler(function(value){
     document.getElementById('message').innerHTML = value;
     document.getElementById('name').value = '';
     document.getElementById('email').value = '';
     document.getElementById('comment').value = '';

     document.getElementById('my-form').style.display='none';  // Added
     submitResponder('button-responder');  // Added
     submitTransition('message');  // Added
    }) 
    .submitData(form);
}

并且，通过上述修改，您还可以删除setTimeout，如下所示。

发件人：

function submitTransition() {
  setTimeout(function() {
   document.getElementById('message').style.color = 'blue';}, 2500);
}

收件人：

function submitTransition() {
  document.getElementById('message').style.color = 'blue';
}

参考

Class google.script.run (Client-side API)

google.script.run 是HTML-service pages 中提供的异步客户端 JavaScript API，可以调用服务器端应用脚本函数。

如果我误解了您的问题并且这不是您想要的结果，我深表歉意。

【讨论】：

@Dom 感谢您的回复。很高兴您的问题得到解决。