如何用JavaScript定时刷新Google Apps Script填充的表格数据？

问题背景 #

需要实现每5秒刷新由Google Apps Script填充的表格数据，数据源为每小时更新数次的Google Sheet。尝试整页刷新后出现空白页，原整页刷新代码如下：

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {window.location.reload()}, 10000)
  google.script.run
    .withSuccessHandler(populateTable)
    .getNearlyTPT()
});

现有表格结构、后端及前端脚本见下方原始代码。

问题分析 #

整页刷新导致空白页的核心原因是：Google Apps Script Web应用在页面刷新后需要重新初始化google.script.run环境，若刷新时机过早，会引发脚本未就绪就执行调用的加载异常。此外，整页刷新体验较差，更优方案是局部刷新表格内容，避免页面重载。

可行解决方案 #

核心思路 #

• 放弃整页刷新，用setInterval定时调用后端接口获取最新数据
• 更新表格前先清空旧数据，避免重复累加
• 修复时间比较逻辑（原字符串比较存在精度错误）

修改后的代码 #

1. Code.gs（修复时间比较逻辑）

function getNearlyTPT(){
  let ss = SpreadsheetApp.openByUrl('xxx');
  let ws = ss.getSheetByName("xxx");
  const today = new Date();
  let currentTotalMinutes = today.getHours() * 60 + today.getMinutes();
  
  // 获取数据并过滤：仅保留有任务且时间晚于当前时间的行
  let data = ws.getRange('H3:J').getValues().filter(r => {
    if (!r[0]) return false; // 过滤空任务行
    // 将表格中的时间（如"16:30"）转换为总分钟数
    const [hours, minutes] = r[1].split(':').map(Number);
    const rowTotalMinutes = hours * 60 + minutes;
    return rowTotalMinutes > currentTotalMinutes;
  });
  
  return data;
}

2. 前端JavaScript（实现局部定时刷新）

function makeRow(row) {
  let tr = document.createElement('tr');
  row.forEach(cell => {
    let td = document.createElement('td');
    td.textContent = cell;
    tr.appendChild(td);
  });
  return tr;
}

function populateTable(data) {
  let tasksTbody = document.getElementById('tpt');
  // 清空旧数据
  tasksTbody.innerHTML = '';
  // 添加新数据行
  data.forEach(row => {
    let tr = makeRow(row);
    tasksTbody.appendChild(tr);
  });
}

// 初始化加载+定时刷新
document.addEventListener('DOMContentLoaded', () => {
  // 首次加载数据
  fetchAndUpdateTable();
  
  // 设置每5秒刷新一次
  setInterval(fetchAndUpdateTable, 5000);
});

// 封装数据获取与更新函数
function fetchAndUpdateTable() {
  google.script.run
    .withSuccessHandler(populateTable)
    .getNearlyTPT();
}

3. HTML结构（保持原有结构即可）

<div id="tpt2Table">
  <table>
    <thead>
      <tr>
        <th>Data 1</th>
        <th>Data 2</th>
        <th>Data 3</th>
      </tr>
    </thead>
    <tbody id="tpt"></tbody>
  </table>
</div>

关键优化点 #

• 局部刷新：仅更新表格tbody内容，无需整页重载，彻底解决空白页问题
• 定时逻辑：使用setInterval替代setTimeout，实现持续稳定的定时刷新
• 数据清理：每次更新前清空tbody，防止数据重复叠加
• 时间比较修复：将时间转换为总分钟数进行数值比较，解决字符串比较的逻辑错误（如"9:00"字符串大于"10:00"的问题）

内容的提问来源于stack exchange，提问作者Łukasz Marchlewicz