时间戳

首页 > 解决方案 > Google App Script setTimeout 函数问题

javascript - Google App Script setTimeout 函数问题

问题描述

我有一个典型的 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]);
}

测试-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 文件功能中

函数提交数据（表单）

并在 test-js 文件功能中

函数doStuff()

他们做得很好，但延迟大约 2.5 秒，然后谷歌脚本来归档函数

返回实用程序.formatString

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

变量中的函数。

在 test-js 文件函数中

函数提交响应者（）

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

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

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

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

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

  • 显示=“无”
  • 显示=“块”

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

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

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

现在有了这个功能

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

和风格

#message { 颜色：透明；}

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

这当然不是正确的方法。

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

提前致谢。

标签： javascripthtmlcssgoogle-apps-script

解决方案

  • 单击“提交”按钮并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';
}

参考

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

推荐阅读