Google Apps Script实现服务端计算结果实时更新HTML文本框

我已大致掌握Google Apps Script服务端向HTML页面传递结果的方法，且通过下方代码成功实现了"Hello World"的基础输出效果。
目前我需要实现循环计算值（result）的实时输出效果：服务端循环中每计算得到一个结果，HTML动态文本框就实时更新，将新结果逐行追加在已有内容下方，和控制台逐行输出的逻辑一致。
我暂未找到该需求的可行实现方案，希望能得到实现思路提示与可参考的代码示例。
祝好
Ben

原有代码 #

code.gs #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('mypage');
}
var test = "Hello World";

function loopSomething() {
  for (i = 0; i < 5; i++) {
     doSometing(i);
  }
  return test;
} 

function doSometing(i){
  var result = i*i;
  console.log(result);
}

mypage.html #

<html>
    
<button onclick="calculate()">Calculate</button>
<textarea id="textbox" name="w3review" rows="4" cols="50"></textarea>
  
<script>
var textbox = document.getElementById("textbox");

function calculate() {
  google.script.run.withSuccessHandler(callback).loopSomething();
}

function callback(whatToWrite) {
  textbox.value = whatToWrite;
}

</script>
</html>

核心原理 #

Google Apps Script的google.script.run是异步请求机制，默认会等服务端函数完全执行结束后才把返回值传给前端回调，无法在循环执行过程中主动向前端推送中间结果。要实现逐行实时追加的效果，最稳定的方案是缓存中间结果+前端轮询拉取：

• 服务端每算出一个结果，就把结果追加写入到脚本缓存（CacheService），同时记录当前计算进度
• 前端触发计算后，每隔很短的时间（比如200ms）请求一次服务端，拉取还没同步到文本框的新结果，追加到文本框里
• 服务端全部计算完成后，给前端返回完成标记，前端停止轮询

修改后可直接运行的代码 #

code.gs #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('mypage');
}

// 初始化计算任务，清空之前的缓存，启动循环计算
function startLoopTask() {
  const cache = CacheService.getScriptCache();
  // 清空上次任务的残留数据
  cache.removeAll(['calc_results', 'calc_status']);
  // 标记任务状态为进行中
  cache.put('calc_status', 'running', 600);
  // 启动循环计算
  loopCalculate();
  return true;
}

function loopCalculate() {
  const cache = CacheService.getScriptCache();
  let results = [];
  for (let i = 0; i < 5; i++) {
    const result = doSomething(i);
    results.push(result);
    // 每算完一个值就写入缓存，设置10分钟过期防止占内存
    cache.put('calc_results', JSON.stringify(results), 600);
    // 这里加个延时模拟真实计算耗时，不需要可以删掉
    Utilities.sleep(500);
  }
  // 标记任务完成
  cache.put('calc_status', 'finished', 600);
  return "全部计算完成";
}

function doSomething(i){
  return i*i;
}

// 给前端轮询调用的接口，返回新结果和任务状态
function getNewResults() {
  const cache = CacheService.getScriptCache();
  const status = cache.get('calc_status') || 'idle';
  const resStr = cache.get('calc_results');
  const results = resStr ? JSON.parse(resStr) : [];
  return {
    status: status,
    results: results
  };
}

mypage.html #

<html>
<button onclick="calculate()">Calculate</button>
<br>
<textarea id="textbox" name="w3review" rows="10" cols="50" readonly></textarea>
  
<script>
const textbox = document.getElementById("textbox");
let lastReadCount = 0; // 记录已经读取过的结果数量，避免重复追加
let pollTimer = null;

function calculate() {
  // 重置状态
  textbox.value = "";
  lastReadCount = 0;
  if (pollTimer) clearInterval(pollTimer);

  // 启动服务端计算任务
  google.script.run.withSuccessHandler(() => {
    // 任务启动成功后开始轮询，每200ms拉一次新结果
    pollTimer = setInterval(fetchNewResults, 200);
  }).startLoopTask();
}

function fetchNewResults() {
  google.script.run.withSuccessHandler((res) => {
    // 追加还没显示过的新结果
    const newResults = res.results.slice(lastReadCount);
    newResults.forEach(item => {
      textbox.value += item + "\n";
      // 自动滚动到底部
      textbox.scrollTop = textbox.scrollHeight;
    });
    lastReadCount = res.results.length;

    // 如果任务完成就停止轮询
    if (res.status === 'finished') {
      clearInterval(pollTimer);
      textbox.value += "--- 计算结束 ---\n";
    }
  }).getNewResults();
}
</script>
</html>

注意事项 #

• 轮询间隔不要设置得太短，低于100ms容易触发GAS的接口调用频率限制，200-500ms的间隔体验已经很接近实时输出
• 如果你的循环计算量很大，单次要跑超过30秒，建议把循环拆成多次定时触发的任务，避免GAS单次执行超时
• 缓存的过期时间根据你的任务总时长调整，比预计总运行时间多留2-3分钟余量就行，避免数据提前过期读不到

内容的提问来源于stack exchange，提问作者Summer Moon