如何修复以随机顺序运行的 Google Apps 脚本功能

Question

I have a project that will generate a dynamic Listbox from GSheet and it will update the customized form i've created in Google Apps Script.我有一个项目，它将从 GSheet 生成一个动态列表框，它将更新我在 Google Apps 脚本中创建的自定义表单。

The code will get the input from the URL when it is loaded and generate 2 ListBox first before getting the input data to pre-fill the form.代码在加载时会从 URL 中获取输入，并在获取输入数据以预填充表单之前先生成 2 个 ListBox。

So the Sequence should be所以序列应该是

Generate the Selection for Car Brand生成汽车品牌选择
Generate the Selection for Colour生成颜色选择
Get the customer data to pre-fill the form获取客户数据以预填表格

But what I'm getting is whenever I refresh the page, the sequence of function loading is random.但是我得到的是每当我刷新页面时，函数加载的顺序是随机的。 Sometimes it is working fine, sometimes it is loading 3 > 1 > 2 or 2 > 3 > 1 or any other random sequence.有时它工作正常，有时它正在加载3 > 1 > 2或2 > 3 > 1或任何其他随机序列。

Please suggest anyway that we can make sure the sequence is running as per design.无论如何，请建议我们可以确保序列按设计运行。

Below is the sample code下面是示例代码

Code.gs代码.gs

var SHEET_CAR_URL = 'https://docs.google.com/spreadsheets/d/{sheet1ID}/edit#gid=0';
var SHEET_COLOUR_URL = 'https://docs.google.com/spreadsheets/d/{sheet2ID}/edit#gid=0';
var SHEET_CUSTOMER_URL = 'https://docs.google.com/spreadsheets/d/{sheet2ID}/edit#gid=0';


function doGet(request) {
 return HtmlService.createTemplateFromFile('CustomerForm').evaluate().setTitle("Demo Form");
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function loadCarList(){
  //load Cars GSheet
  var carsspreadsheet = SpreadsheetApp.openByUrl(SHEET_CAR_URL).getSheetByName('Cars');
  numItemCars = carsspreadsheet.getLastRow()-1;// get the number of rows in the sheet
  colItemCars = carsspreadsheet.getLastColumn();// get the number of rows in the sheet
  listCarsArray = carsspreadsheet.getRange(2,1,numItemCars,colItemCars).getValues(); 

  var listCar = "<option value=''></option>";  
   for(var i=0; i<numItemCars; i++){
    listCar += "<option value='"+listCarsArray[i][0]+"'>"+listCarsArray[i][0]+"</option>";
  }
  Logger.log(listCar);
  return listCar;
}

function loadColourList(){
  //load Colour GSheet
  var colourspreadsheet = SpreadsheetApp.openByUrl(SHEET_COLOUR_URL).getSheetByName('Colour');
  numItemColour = colourspreadsheet.getLastRow()-1;// get the number of rows in the sheet
  colItemColour = colourspreadsheet.getLastColumn();// get the number of rows in the sheet
  listColourArray = colourspreadsheet.getRange(2,1,numItemColour,colItemColour).getValues();

  var listColour = "<option value=''></option>";  
   for(var i=0; i<numItemColour; i++){
    listColour += "<option value='"+listColourArray[i][0]+"'>"+listColourArray[i][0]+"</option>";
  }
  Logger.log(listColour);
  return listColour;
}

function loadCustomer(inputID){
  //load Customer GSheet
  var customerspreadsheet = SpreadsheetApp.openByUrl(SHEET_CUSTOMER_URL).getSheetByName('Customer');
  numItemCust = customerspreadsheet.getLastRow()-1;// get the number of rows in the sheet
  colItemCustr = customerspreadsheet.getLastColumn();// get the number of rows in the sheet
  listCustArray = customerspreadsheet.getRange(2,1,numItemCust,colItemCustr).getValues(); 

  var custDetails = [];
   for(var i=0; i<numItemCust; i++){
    var custID = listCustArray[i][0];
    var custName = listCustArray[i][1];
    var custArea = listCustArray[i][2];
    var custCar = listCustArray[i][2];
    var custCarColour = listCustArray[i][2];
    if(custID == inputID){
      custDetails = [custID,custName,custArea,custCar,custCarColour];
    }
  }
  Logger.log(custDetails[0]);
  return custDetails;
}

CustomerForm.html CustomerForm.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body onload="myLoadFunction()">
    <table>
      <tr>
        <td> Customer ID : </td>
        <td> <input type="text" id="CustID"> </td>
      </tr>
      <tr>
        <td> Customer Name : </td>
        <td> <input type="text" id="CustName"></td>
      </tr>
      <tr>
        <td> Customer Area : </td>
        <td> <input type="text" id="CustArea"></td>
      </tr>
      <tr>
        <td> Car Brand : </td>
        <td><select class='listbox' id='listCar' required></select> </td>
      </tr>
      <tr>
        <td> Car Colour : </td>
        <td><select class='listbox' id='listColour' required></select> </td>
      </tr>
    </table>
  </body>
</html>
<script>

function myLoadFunction(){
    // Get the URL parameter
    google.script.url.getLocation(inputstrings => {
 
        let inputjson =  JSON.stringify(inputstrings.parameter);
        let inputparameters = JSON.parse(inputjson)
        var in_custID = inputparameters.id;
        alert('This is the ID '+in_custID);

        google.script.run.withSuccessHandler(initializeCar).loadCarList(); 
        google.script.run.withSuccessHandler(initializeColour).loadColourList(); 

        google.script.run.withSuccessHandler(initializeForm).loadCustomer(in_custID); 

    })

    function initializeCar(inputList){
      alert('Loading Cars')
      document.getElementById('listCar').innerHTML = inputList;   
    }
    
    function initializeColour(inputList){
      alert('Loading Colour')
      document.getElementById('listColour').innerHTML = inputList;   
    }

    function initializeForm(inputDetails){
      alert('Loading Form')
      document.getElementById('CustID').value = inputDetails[0];
      document.getElementById('CustName').value = inputDetails[1];
      document.getElementById('CustArea').value = inputDetails[2];
      document.getElementById('listCar').value = inputDetails[3];
      document.getElementById('listColour').value = inputDetails[4];
    }
}

</script>

Sample Customer Data样本客户数据

ID No证件号码	Customer Name顾客姓名	Customer Area客户专区	Car Brand汽车品牌	Car Colour汽车颜色
1001 1001	Alice爱丽丝	IN在	Toyota丰田	Blue蓝色的
1002 1002	Bob鲍勃	OH哦	Honda本田	Red红色的
1003 1003	Charlie查理	WD西部数据	BMW宝马	Brown棕色的

Sample Colour样品颜色

Colour颜色
Blue蓝色的
Red红色的
Brown棕色的
Green绿色的
Yellow黄色

Sample Car Brand样车品牌

Brand牌
BMW宝马
Toyota丰田
Honda本田
Tesla特斯拉
VW大众

I've tried to use If Else to make sure the ListBox is already populated before running the 3rd function but no luck with that.我尝试使用 If Else 来确保在运行第三个函数之前已经填充了 ListBox，但没有运气。

Thanks in Advance to anybody that can help in this.在此先感谢任何可以提供帮助的人。

Answer 1

Because google.script.run runs asynchronously, which means the second one doesn't wait for the first to return before running.因为 google.script.run 是异步运行的，这意味着第二个在运行之前不会等待第一个返回。 You need to nest them.你需要嵌套它们。 Then in the html <script> simply run the first only.然后在html <script>中简单地运行第一个而已。 I've moved in_custID outside of the setLocation call so its available to the other functions.我已将in_custID移到 setLocation 调用之外，因此它可用于其他函数。

function myLoadFunction(){
    // Get the URL parameter
    var in_custID = null;
    google.script.url.getLocation(inputstrings => {
 
        let inputjson =  JSON.stringify(inputstrings.parameter);
        let inputparameters = JSON.parse(inputjson)
        in_custID = inputparameters.id;
        alert('This is the ID '+in_custID);

        google.script.run.withSuccessHandler(initializeCar).loadCarList(); 

    })

    function initializeCar(inputList){
      alert('Loading Cars')
      document.getElementById('listCar').innerHTML = inputList;
      google.script.run.withSuccessHandler(initializeColour).loadColourList(); 
    }
    
    function initializeColour(inputList){
      alert('Loading Colour')
      document.getElementById('listColour').innerHTML = inputList;   
      google.script.run.withSuccessHandler(initializeForm).loadCustomer(in_custID); 
    }

    function initializeForm(inputDetails){
      alert('Loading Form')
      document.getElementById('CustID').value = inputDetails[0];
      document.getElementById('CustName').value = inputDetails[1];
      document.getElementById('CustArea').value = inputDetails[2];
      document.getElementById('listCar').value = inputDetails[3];
      document.getElementById('listColour').value = inputDetails[4];
    }
}

如何修复以随机顺序运行的 Google Apps 脚本功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-29 13:28:28

如何修复以随机顺序运行的 Google Apps 脚本功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-29 13:28:28

解决方案1
1 已采纳 2022-05-29 13:28:28