javascript - Google App Script setTimeout 函数问题

标签 javascript html css google-apps-script

我有一个典型的 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>

Google 脚本:

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 脚本文件函数中

function submitData (form)

以及test-js文件中的函数

function doStuff ()

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

return Utilities.formatString

可以显示结果(姓名 - 电子邮件 - 评论 - PDF URL) 必须等待其结论，2.5s。

变量中的函数。

在test-js文件函数中

function 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 = "block"

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

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

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 { color: transparent; }

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

这肯定不是正确的方法。

我希望我的解释已经很清楚了，您的帮助将会非常有用。

提前致谢。

最佳答案

  • 您希望在点击“提交”按钮并且完成 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';
}

引用

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

关于javascript - Google App Script setTimeout 函数问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59654994/

上一篇：php - 尝试在 Laravel 中使用关系时出现未定义的属性错误

下一篇：php - 允许的内存大小 php.ini

相关文章：

javascript - 按钮添加一行并从文本字段输入单元格值

javascript - 无法使用 javascript 在 Firefox 上刷新

html - 无序列表徽章/计数标签

javascript - IE9 忽略滚动和溢出属性

javascript - 具有 ID 的 DOM 树元素是否成为全局属性？

javascript - 如何在代码中使用 For 循环？

html - 背景图像不会显示

php - 'field entry' 中的未知列

javascript - 为什么每一列都在不同的行中？

javascript - 删除除主页以外所有页面的公共(public)页眉中的特定元素

©2024 IT工具网  联系我们