GAS - 等待用户输入数据，然后功能继续答案

【问题标题】：GAS - Wait until user enters data before function continuesGAS - 等待用户输入数据，然后功能继续
【发布时间】：2015-02-02 14:01:24
【问题描述】：

我刚从 GAS 开始，所以如果这是一个明显的问题，我将不胜感激并道歉。我正在尝试实现一个日期选择器，以便用户可以选择一些日期而不是输入它们。我使用这个问题的代码来做到这一点：

Returning a value using Date picker in HTMLService / Google Apps Script

这很好用，但我的问题是我的其余代码在用户输入日期之前继续运行。调用html的函数是：

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('dateDialog')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() 
    .showModalDialog(html, 'Please provide a Date Range');
  Logger.log("HTML return = %s", html.getContent());     
  return html.getContent();
}

我从下面的主脚本文件中调用它。选择器出现，但我的其余代码继续执行。在这种情况下，我有一个弹出并关闭日期选择器的 msgBox。

function runthis(){
  var a = showDialog();
  Logger.log(a);

  //rest of code would go here
  Browser.msgBox('hello world');
}

我想我可以循环一些超时或暂停，直到 html 返回值，但这似乎没有必要。我究竟做错了什么？感谢您的帮助。

【问题讨论】：

showModalDialog 不会阻止代码执行（这样做会导致浏览器 UI 冻结。您需要将回调传递给模态对话框并在关闭对话框以继续执行时执行该回调你的代码。我没有使用谷歌应用脚本来发布描述设置回调的答案的经验，对不起。
感谢 Prusse，这让我找到了答案。

标签： javascript jquery html google-apps-script datepicker

【解决方案1】：

我找到了解决此问题的正确方法。基本上我需要重新排序我调用不同函数的方式以及我从哪里开始我的代码。也许这个问题应该被删除，或者这可能会有用，我不知道。

我从我的入口点调用showDialog()：runthis()，因此runthis() 中的后续代码正在执行，这是不受欢迎的。

相反，我将脚本的入口点更改为 showDialog()，然后我可以从那里将用户输入的数据传递给 runthis()

真是愚蠢的错误，但希望这对不熟悉HtmlService的其他人有所帮助

编辑：我先调用日期选择器：

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('DateDialog')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
    .showModalDialog(html, 'Pick a date')
}

然后在单独的 html 文件中调用模态对话框：

<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt } 
                        p { color : red ; font-size : 11pt } 
</style>
<link rel="stylesheet"     href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-    ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">    </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<p>Please select a date below :</p>

<p> Start Date : <input type="text" name="StartDate" id="startdatepicker" />     </p>
<p> End Date :   <input type="text" name="EndDate" id="enddatepicker" />  </p>
<script>
$( "#startdatepicker" ).datepicker({
  showWeek: true,
  firstDay: 0,
 });
</script>
<script>
$( "#enddatepicker" ).datepicker({
  showWeek: true,
  firstDay: 0,
 });
</script>
<input type="button" value="Create" onclick="submitDates()" />
<input type="button" value="Close" onclick="google.script.host.close()" />


<script>
// Pass input dates to server-side submitDates()
function submitDates() {
  var startDate = $("#startdatepicker").val();
  var endDate = $("#enddatepicker").val();

  google.script.run
    .withSuccessHandler(
       // Dates delivered, close dialog
       function() {
         google.script.host.close();
       })
       // Display failure messages
     .withFailureHandler(
       function() {
         var div = $('<div id="error" class="error">' + msg + '</div>');
         $(element).after($("#demo"));
       })
     .submitDates(startDate,endDate);
}

</script>
</div>

它将日期传递给服务器端函数，然后将数据发送到其他几个函数，在本例中只有一个，Timesheet（而不是runthis()）

function submitDates(startDate,endDate) {
     Timesheet(startDate,endDate);
}

可能有很多需要清理和简化，但还没有时间这样做，很高兴它正在工作！

【讨论】：