如何在Google Apps Script中实现连续输出（进度计数器）

你的问题很典型——Google Apps Script的服务器端代码是同步执行且UI更新会被缓存，直到整个函数运行完毕才会显示最后一次的UI状态，所以你循环里的show(finestra)并不会实时更新窗口内容，只会在循环结束后显示最后一个i的值。

要实现连续的进度输出，我们需要结合客户端HTML/JavaScript和服务器端的异步交互，让客户端主动获取或接收进度更新。下面给你两种可行的方案：

方案一：用属性存储+客户端定时轮询进度 #

这个方案会用PropertiesService存储当前进度，然后客户端每隔一段时间请求最新进度并更新显示。

服务器端代码 #

function startProgress() {
  // 初始化进度为0
  PropertiesService.getScriptProperties().setProperty('progress', 0);
  
  // 打开进度窗口
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Progress')
    .setTitle('Progresso')
    .setWidth(300)
    .setHeight(75);
  SpreadsheetApp.getActiveSpreadsheet().show(htmlOutput);
  
  // 执行任务循环，逐步更新进度
  const maxCount = 20;
  for (let i = 1; i <= maxCount; i++) {
    // 更新当前进度到属性存储
    PropertiesService.getScriptProperties().setProperty('progress', i);
    // 模拟任务耗时（根据你的实际需求调整）
    Utilities.sleep(500);
  }
  
  // 任务完成后标记状态
  PropertiesService.getScriptProperties().setProperty('progress', 'Completato!');
}

// 供客户端调用的进度获取函数
function getCurrentProgress() {
  return PropertiesService.getScriptProperties().getProperty('progress');
}

创建HTML文件（命名为Progress.html） #

<!DOCTYPE html>
<html>
  <body>
    <p>Valore di i: <span id="progressCounter">0</span></p>
    <script>
      // 定时更新进度的函数
      function updateProgressDisplay() {
        google.script.run.withSuccessHandler(function(progress) {
          document.getElementById('progressCounter').textContent = progress;
          
          // 如果任务未完成，继续轮询
          if (progress !== 'Completato!') {
            setTimeout(updateProgressDisplay, 300);
          } else {
            // 任务完成后1.5秒自动关闭窗口
            setTimeout(() => google.script.host.close(), 1500);
          }
        }).getCurrentProgress();
      }
      
      // 页面加载后立即开始更新
      window.onload = updateProgressDisplay;
    </script>
  </body>
</html>

方案二：异步递归执行任务 #

这个方案通过客户端触发服务器端的单步任务，每完成一步就返回进度，客户端更新后再触发下一步，完全避免服务器端的阻塞。

服务器端代码 #

function initProgressTask() {
  // 打开进度窗口
  var htmlOutput = HtmlService.createHtmlOutputFromFile('ProgressAsync')
    .setTitle('Progresso')
    .setWidth(300)
    .setHeight(75);
  SpreadsheetApp.getActiveSpreadsheet().show(htmlOutput);
}

// 执行单步任务并返回当前进度
function executeStep(currentStep) {
  const maxCount = 20;
  if (currentStep > maxCount) {
    return 'Completato!';
  }
  
  // 模拟当前步骤的任务耗时
  Utilities.sleep(500);
  return currentStep;
}

创建HTML文件（命名为ProgressAsync.html） #

<!DOCTYPE html>
<html>
  <body>
    <p>Valore di i: <span id="progressCounter">0</span></p>
    <script>
      let currentStep = 1;
      const maxSteps = 20;
      
      function runNextStep() {
        google.script.run.withSuccessHandler(function(progress) {
          document.getElementById('progressCounter').textContent = progress;
          
          if (progress !== 'Completato!') {
            currentStep++;
            // 短暂延迟后触发下一步
            setTimeout(runNextStep, 100);
          } else {
            setTimeout(() => google.script.host.close(), 1500);
          }
        }).executeStep(currentStep);
      }
      
      window.onload = runNextStep;
    </script>
  </body>
</html>

使用说明 #

不管用哪种方案，你只需要运行对应的初始化函数（方案一的startProgress()，方案二的initProgressTask()），就能看到窗口实时显示计数器的变化了。

核心原理就是把原来的服务器端同步循环拆分成客户端和服务器的异步交互，这样UI更新就不会被延迟到函数结束了。

内容的提问来源于stack exchange，提问作者LUCA DELLA GHEZZA