App Script开发Web App表单实现数值实时展示的问题求助

1 修复服务端code.gs逻辑缺陷 #

原代码存在逻辑错误：判断用户索引的语句为空逻辑，且索引为-1时会触发数组访问报错，修正后代码如下：

function getTime(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const wsData = ss.getSheetByName("Run");
  const emp = Session.getActiveUser().getEmail();
  const now = new Date();
  const d = wsData.getDataRange().getDisplayValues().reverse();
  const emp_i = d.findIndex(r => r[1] === emp);
  // 找不到当前用户记录或时间字段为空时返回默认值
  if (emp_i === -1 || !d[emp_i][3]) {
    return "00:00:00";
  }
  const hour = new Date(now - new Date(d[emp_i][3])).toISOString().substr(11, 8);
  return hour;
}

var Duration = [getTime()];

2 修改前端模板，增加定时更新逻辑 #

在原有HTML代码基础上追加客户端JavaScript代码，通过setInterval固定间隔调用服务端接口更新数值，完整前端代码如下：

<div>
  <label for="Duration">Last Activity Duration</label>
  <select class="w3-select"  id="Duration">
      <? for(let i=0;i<Duration.length;i++){ ?>
      <option>
          <?= Duration[i]; ?>
      </option>
      <? }?>
  </select>
</div>

<script>
function updateDuration() {
  // 调用GAS原生接口请求服务端最新数据
  google.script.run
    .withSuccessHandler(latestDuration => {
      const selectEl = document.getElementById('Duration');
      // 清空原有选项后插入最新值
      selectEl.innerHTML = '';
      const option = document.createElement('option');
      option.textContent = latestDuration;
      selectEl.appendChild(option);
    })
    .withFailureHandler(err => console.error('数据拉取失败：', err))
    .getTime();
}

document.addEventListener('DOMContentLoaded', () => {
  // 页面加载完成后立刻更新一次
  updateDuration();
  // 每5秒更新一次，可自行修改间隔毫秒数
  setInterval(updateDuration, 5000);
});
</script>

如果不需要下拉选择功能，可直接把select标签替换为普通文本标签，对应修改更新逻辑即可，性能更好。

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