如何正确添加定时器实现Tabulator表格从Google Sheets自动更新数据？

问题根源 #

你之前的错误在于每次更新时重复创建Tabulator实例，并且通过递归调用finalsLoad导致无限循环请求，从而引发报错。正确的思路是复用同一个Tabulator实例，并通过定时器定期触发数据拉取和更新。

具体修改步骤 #

1. 全局存储Tabulator实例
   在前端代码最外层声明全局变量，用于保存表格实例，避免重复创建：

   let table; // 全局保存Tabulator表格实例
   

2. 修改表格初始化/更新逻辑
   调整afterFinalsLoaded函数，首次加载时创建表格，后续更新时直接调用updateData更新数据：

   function afterFinalsLoaded(fsData) {
       if (!table) {
           // 首次加载：初始化Tabulator表格
           table = new Tabulator("#due2-date-table", {
               // 你的表格配置项（列定义、样式等）
               data: fsData // 传入初始数据
           });
       } else {
           // 后续更新：直接更新表格数据
           table.updateData(fsData);
       }
   }
   

3. 添加定时更新逻辑
   在页面初始化完成后，首次加载数据，然后设置定时器定期触发数据拉取（时间间隔可根据需求调整，示例为30秒）：

   document.addEventListener("DOMContentLoaded", startLoading);
   function startLoading() {
       finalsLoad(); // 页面加载时首次获取数据
       // 每30秒执行一次数据更新（30000毫秒=30秒）
       setInterval(finalsLoad, 30000);
   }
   

注意事项 #

• 不要在afterFinalsLoaded中递归调用finalsLoad，这会导致无限请求循环，占用资源并引发报错。
• 定时器时间间隔不宜过短（比如不要设成1秒），避免频繁请求Google Apps Script触发配额限制。
• 后端的getFinalsSheet函数无需修改，保持原有逻辑即可。

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