Google App脚本setTimeout函数问题 [英] Google App Script setTimeout Function problem

查看：81
本文介绍了Google App脚本setTimeout函数问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a typical Google App Html form that records the data entered in a spreasheet. Here are the files.

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]);
}

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脚本文件功能

Now in Google Script file function

函数submitData(窗体)

function submitData (form)

和test-js文件功能

and in test-js file function

函数doStuff()

function doStuff ()

他们做得很好，但潜伏期约为2.5秒 然后让Google Script提交功能

they do their job well but with a latency of around 2.5s then for Google Script to file the function

返回Utilities.formatString

return Utilities.formatString

可以显示结果(名称-电子邮件-评论-PDF网址) 它的结论必须等待2.5秒.

can show the result (name - email - comment - PDF Url) its conclusion must be awaited, 2.5s.

变量中的功能.

在test-js文件功能中

In test-js file function

函数commitResponder()

function submitResponder ()

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

makes the fields linked to the ID (message) visible with variables

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

以及链接到ID的字段(按钮响应器)
新注册"按钮

and the field linked to the ID (button-responder)
"New registration" button

然后在加载index.html页面时 显示表单和提交"按钮， 通过单击提交编辑字段 表单被隐藏，出现新注册"按钮 大约2.5秒后，还会显示已编辑的字段(名称-电子邮件....).

Then upon loading the index.html page the form and the "submit" button are shown, edit the fields by clicking on submit the form is hidden, the "New registration" button appears and after about 2.5s the edited fields (name-email ....) also appear.

点击下面的新注册"按钮 表单重新出现在开头，显然不是在重新加载页面上，而是在

Click on the button "New registration" below the form reappears as at the beginning, clearly not with a reload page, but simply with

  • display ="none"
  • display ="block"
  • display = "none"
  • display = "block"

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

Now here's the problem I can't solve:

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

By re-editing the fields and clicking again on submit-form the fields edited the previous time appear again immediately

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

大约2.5秒后，它们会使用新编辑的字段进行更新

and after about 2.5s they update with the new edited fields

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)； }

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

并具有风格

#message {颜色:透明； }

#message { color: transparent; }

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

I'm trying to find a solution to delay (hide) the display of the old fields until the new ones are updated.

这当然不是正确的方法.

It is certainly not the right way.

希望我的解释很清楚，您的帮助将非常有帮助.

I hope I have been clear in the explanation, your help will be very much able.

谢谢.

推荐答案

  • 您想在单击提交"按钮并完成submitData的脚本后显示新注册"的文本和按钮.

    • You want to show the texts and button of "New registration" after "submit" button was clicked and the script of submitData was finished.

      • 如果我的理解是正确的，那么该修改如何?

      If my understanding is correct, how about this modification?

      出现问题的原因是google.script.run与异步进程一起运行.这样，在submitData的脚本完成之前，将运行document.getElementById('my-form').style.display='none'，submitResponder('button-responder')和submitTransition('message').

      The reason of your issue is that google.script.run is run with the asynchronous process. By this, before the script of submitData is finished, document.getElementById('my-form').style.display='none', submitResponder('button-responder') and submitTransition('message') are run.

      请按如下所示修改脚本.

      Please modify your script as follows.

      <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.

      And, by above modification, you can also remove setTimeout as follows.

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

      收件人:

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

      参考

      • google.script.run类(客户端API)

        google.script.run是异步客户端JavaScript API，可在 HTML服务中使用页面，它们可以调用服务器端的Apps脚本函数.

        google.script.run is an asynchronous client-side JavaScript API available in HTML-service pages that can call server-side Apps Script functions.

        • 如果我误解了您的问题，而这不是您想要的结果，我深表歉意.

        If I misunderstood your question and this was not the result you want, I apologize.

        这篇关于Google App脚本setTimeout函数问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆