Google Apps脚本网络应用-跨服务器端调用（？）

Question

我有一个正在编写的Web应用程序，想要更新以实时写回服务器。 在客户端，我运行此功能并捕获每个输入。 输入当前为所有复选框。 问题在于，我可以比对脚本进行检查的速度更快地检查复选框，因此最终结果出乎意料。 因此，我需要在选择之间放慢用户的速度，或者确保每个服务器调用在下一个开始之前完成。 我该怎么做呢？

这是客户端脚本部分的开始。 还有其他功能，例如成功和失败处理程序。

<script>
$("form").change(function(e) {

if (e.target.type && e.target.type === 'checkbox') {
  //A checkbox was changed, so act on it
  var name = e.target.value.substr(0,e.target.value.lastIndexOf("_"));
  var position = e.target.value.substr(e.target.value.lastIndexOf("_") + 1);
  var passArray = [name, position];

  if (e.target.checked) {
    //Add the value to the person's Assigned Position
    google.script.run.withSuccessHandler(editChangeReturnedFromServer).withFailureHandler(editFailed).setWSAssignedPosition(passArray);
  } else {
    //Remove the value from the peson's Assigned Position
    google.script.run.withSuccessHandler(editChangeReturnedFromServer).withFailureHandler(editFailed).clearWSAssignedPosition(passArray);
  }
  return;
}

 ...(other functions)...
 </script>

如果用户快速setWSAssignedPosition()复选框，则服务器端setWSAssignedPosition()函数的调用似乎交叉甚至重复，因为所有正确的值都没有添加到电子表格中，或者添加了多个相同的副本。 如果我通过alert('I am changing that');降低了最终用户的速度alert('I am changing that'); 就在google.script.run...行之前，然后一切正常。 实际上，我看着电子表格中的一行被后来出现的条目替换了。 但这很麻烦，很快就变得烦人了。

我对“提交”或“应用”按钮不感兴趣。 我真的希望这种情况能够即时发生。

服务器端功能是：

//Set the Assigned Position for the person passed to the function
function setWSAssignedPosition(passedArray){

  var name = passedArray[0];
  var position = passedArray[1];

  //Get the entries from the filled out Position Requests in the appropriate sheet
  var validWSRequests = getValidWSRequests();
  var foundWSRequest = false;

  for (i in validWSRequests) {
    if (validWSRequests[i].participantName === name){
      ws_sheet.getRange(validWSRequests[i].sheetrow + 2 , ws_headers[0].indexOf("Assigned Position") + 1).setValue(position);
      foundWSRequest = true;
      break;

    }
  }

  if (!foundWSRequest) {
    var WSOthersAssigned = getRowsData(ws_norequests_sheet);
    var WSOthersAssigned_headers = ws_norequests_sheet.getRange(1, 1, 1, ws_norequests_sheet.getLastColumn()).getValues();
    //Get the first empty row on the sheet for those who didn't fill out the form in case we need it.
    var firstEmptyRow = getFirstEmptyRowWholeRow(ws_norequests_sheet);

    if (WSOthersAssigned.length < 1){
        //No records exist at all, so add the first
          ws_norequests_sheet.getRange(firstEmptyRow, WSOthersAssigned_headers[0].indexOf("Assigned Position") + 1).setValue(position); 
          ws_norequests_sheet.getRange(firstEmptyRow, WSOthersAssigned_headers[0].indexOf("PARTICIPANT NAME") + 1).setValue(name); 
     }else {

      for (i in WSOthersAssigned){
        var seeme = i;
        if (WSOthersAssigned[i].participantName === name) {
          //Found a record so edit it
          ws_norequests_sheet.getRange(WSOthersAssigned[i].sheetrow + 2 , WSOthersAssigned_headers[0].indexOf("Assigned Position") + 1).setValue(position);
          break;

        } else {
          //No record found, so append it
          ws_norequests_sheet.getRange(firstEmptyRow, WSOthersAssigned_headers[0].indexOf("Assigned Position") + 1).setValue(position); 
          ws_norequests_sheet.getRange(firstEmptyRow, WSOthersAssigned_headers[0].indexOf("PARTICIPANT NAME") + 1).setValue(name);
          break;

        }
      }
  }
  }
// This didn't help  
//  SpreadsheetApp.flush();
return [name, true, position];

}

全局定义了ws_norequests_sheet和ws_norequests_sheet ，以在电子表格中获取存储这些项目的适当工作表。 根据初始来源，数据将保存在两张纸中的一张中。 我目前正在测试所有数据都进入第二张表的位置，因为这些复选框都相互堆叠，因此可以快速访问

Answer 1

这就是异步服务器调用的本质。 您始终需要注意，呼叫可能不会以发送时的顺序返回。 您始终需要注意并使用成功和失败回调来正确响应。

有几种方法（以您想要的方式）来处理您的问题，其中大多数方法是阻止用户触发对表单元素的更改操作，然后才允许他们在服务器调用返回后才执行。

一种简单的方法是在更改时禁用表单元素，然后在回调中重新启用它们。

所以首先在更改时禁用它们：

$("form").change(function(e) {
  if (e.target.type && e.target.type === 'checkbox') {
    $("input[type=checkbox]", "form").attr("disabled", "disabled");
  //Your change code here  
  }     
}

然后在成功和失败处理程序中，重新启用它们：

function editChangeReturnedFromServer(response) {
  //your code here to work with server data
  $("input[type=checkbox]", "form").removeAttr("disabled");
}
function editFailed(error) {
  //your code here to handle error
  $("input[type=checkbox]", "form").removeAttr("disabled");
}

其他选项是使用类似jQuery UI之类的内容来创建一个模式对话框，该对话框将阻止用户单击选项，否则可能会破坏这些选项。 很好，因为它可以很清楚地向用户指示发生了禁用输入可能对他们而言不那么明显的事情。

基本上，您需要确保用户在上一个更改完成之前不能触发另一更改。 或者，理论上您可以使用一个全局变量来跟踪未处理的复选框值，并使用另一个变量来跟踪是否正在进行服务器调用，但这对于这种简单的事情来说非常复杂。

坦率地说，从UI角度来看，我并不完全同意您的方法。 复选框的预期行为是它会收集用户的输入，并且仅在单击提交按钮时才将其发送到服务器。 作为最终用户，我希望在“提交”某些内容时等待，而不是在选中一个框时等待。 不得不等待任何时间（甚至是几分之一秒）都会使我烦恼。 我宁愿检查几个选项，然后等待更长的提交时间。

根据返回值实际执行的操作，一个更优雅的解决方案可能是在客户端不涉及服务器的情况下立即处理客户端上的操作。 仅在用户完成选择后才发送数据。

例如，如果选中一个框应向用户显示3个输入，则可以：

 $("#check1").click(function(){ $(".showOnCheck1").toggle(this.checked); }); 

 .showOnCheck1 {display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input type="checkbox" id="check1" value="check1"><label for="check1">Check box 1</label> </p> <p class="showOnCheck1"> <label for="text1">Text Box 1</label><input type="text" id="text1"> </p> <p class="showOnCheck1"> <label for="text2">Text Box 2</label><input type="text" id="text2"> </p> <p class="showOnCheck1"> <label for="text3">Text Box 3</label><input type="text" id="text3"> </p> 

如您所见，完全没有延迟，也不需要降低用户速度或等待服务器，但这取决于您对响应的处理方式。 您可以在客户端使用的逻辑越多，用户等待服务器的次数就越少。