ToolJet 定时刷新指南：使用 RunJS 在指定时间间隔自动运行查询

ToolJet 定时刷新指南使用 RunJS 在指定时间间隔自动运行查询【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本指南讲解如何在 ToolJet 中构建一个按指定时间间隔自动获取数据的应用通过 REST API 查询拉取数据、用表格组件展示并借助RunJSRun JavaScript code查询配合浏览器setInterval定时器实现周期性触发。读完本文你将掌握 RunJS 查询的完整用法、actions与variables的配合方式以及如何用clearInterval为自动化任务增加可控的停止机制从而应用到轮询接口、实时监控大屏等真实场景。方案概览为什么用 RunJS setInterval 实现定时查询ToolJet 查询面板本身不提供原生的定时执行开关但 RunJS 查询赋予了在浏览器端执行任意 JavaScript 的能力因此可以借助 Web 平台的标准定时器 APIsetInterval来周期性调用其他查询如 REST API 查询实现动态、高效的数据抓取。从源码看RunJS 是 ToolJet 内置的**静态数据源default data source**之一。服务端在 server/src/modules/data-sources/constants/index.ts 中定义了DefaultDataSourceKinds [restapi, runjs, runpy, tooljetdb, workflows]前端查询面板中对应runjs这一查询类型显示名称为 Run JavaScript code见 frontend/src/AppBuilder/QueryManager/constants.js。在 queryPanelSlice.js 中RunJS 代码通过new AsyncFunction(...)在浏览器沙箱内执行因此setInterval、clearInterval等浏览器 API 可以正常使用这也是本方案可行的底层基础。Step 1: 创建新应用并添加表格组件在 ToolJet 仪表盘中新建一个应用进入应用编辑器App Builder后从组件库拖入一个表格Table组件到画布上。该表格将用于展示 REST API 查询返回的数据。Step 2: 创建并测试 REST API 查询在查询面板Query Panel中新建一个REST API查询请求方法选择GET在 URL 中填入 mock 接口地址例如https://jsonplaceholder.typicode.com/posts将查询命名为post点击Run运行查询确认能成功获取到数据可在查询结果预览中检查返回的 JSON 数组。Step 3: 将查询数据绑定到表格选中画布上的表格组件在右侧属性面板中找到Table Data表格数据属性将其设置为{{queries.post.data}}这里的{{ }}是 ToolJet 的模板语法queries.post.data引用名为post的查询的返回结果。设置后REST API 查询与表格组件之间就建立了数据连接后续任何一次queries.post.run()调用产生的数据变化都会自动反映到表格中。Step 4: 用 RunJS 查询实现定时触发新建一个RunJS查询写入以下脚本通过setInterval每 5 秒触发一次post查询actions.setVariable(interval, setInterval(countdown, 5000)); // 5000ms 5 seconds function countdown(){ // Function to trigger the REST API query queries.post.run(); // action to run the REST API query }要点说明actions.setVariable(interval, ...)将定时器的 ID 保存到应用级变量interval中供后续停止定时器时使用setInterval(countdown, 5000)表示每 5000 毫秒5 秒调用一次countdown函数queries.post.run()是 RunJS 环境中运行指定查询的标准动作等价于在查询面板中点击 Run。间隔时长可根据业务需求调整。如果要在一次周期内串联执行多个动作可以在countdown函数中使用async/await例如先运行两个 REST API 查询再弹出提示actions.setVariable(interval, setInterval(countdown, 5000)); async function countdown(){ await queries.restapi1.run() await queries.restapi2.run() await actions.showAlert(info,This is an information) }源码视角RunJS 执行环境中可用的能力为什么这段脚本里能直接用actions、queries、setInterval因为在 queryPanelSlice.js 中RunJS 代码通过new AsyncFunction(...)动态构造执行函数并向其中注入了以下参数即 RunJS 运行环境的内置能力工具库moment、_lodash、axios应用状态components组件、queries查询、globals、page页面对象、variables应用变量、constants动作对象actions如setVariable、showAlert、runQuery等定时器 APIsetTimeout、setInterval、clearTimeout、clearInterval、requestAnimationFrame、cancelAnimationFrame条件注入当查询定义了参数时注入parameters应用类型为模块Module时注入input以及通过 JS 库管理器加载的第三方库见 frontend/src/AppBuilder/_helpers/libraryLoader.js。可用动作的完整清单定义在 frontend/src/AppBuilder/_stores/constants/actions.js包括runQuery、setVariable、unSetVariable、showAlert、showModal、setLocalStorage、copyToClipboard、goToApp、switchPage、logInfo等。另一个值得注意的实现细节RunJS 环境中的定时器并非直接调用window.setInterval而是经由 frontend/src/AppBuilder/_helpers/timerRegistry.js 的trackedSetInterval包装——它会记录所有存活定时器 ID并在应用切换或页面卸载时通过clearAll()统一清理避免 RunJS 遗留定时器导致的内存泄漏。这意味着只要通过actions.setVariable保存定时器 ID就能用同样的clearInterval语义将其清除。Step 5: 高级配置页面加载时自动启动在 RunJS 查询的Settings设置面板中启用Run query on page load页面加载时运行查询。这样应用一打开RunJS 查询就会自动执行setInterval随即启动无需手动点击运行。建议将查询重命名为setInterval便于识别与后续引用。Step 6: 防止无限触发用 clearInterval 停止定时器setInterval会无限期执行必须提供停止机制。新建另一个 RunJS 查询命名为clearInterval文档原例拼写为clearInrternal可按你的命名习惯调整脚本如下clearInterval(variables.interval);variables.interval读取 Step 4 中通过actions.setVariable(interval, ...)保存的定时器 IDclearInterval将其清除后定时触发随即终止。两步配合即为完整的启动—停止闭环。Step 7: 添加按钮作为用户触发的停止机制为了让使用者能直观地停止定时刷新拖入一个**按钮Button**组件到画布上并为其配置事件处理器Event Handler事件选择On click点击时动作选择Run Query查询选择上一步创建的clearInterval。这样用户点击按钮即可随时停止自动刷新应用从无限轮询变为可人工干预的受控状态。扩展建议与注意事项避免重复启动定时器如果 RunJS 查询可能被执行多次例如手动点击了运行会在actions.setVariable覆盖 ID 的同时遗留旧定时器。稳妥做法是先clearInterval(variables.interval)再重新setInterval或参考 timerRegistry 的clearAll()思路统一管理。合理选择间隔时长间隔过短会给后端接口造成不必要的压力还可能触发限流。轮询类场景建议结合业务数据时效性设置 5 秒以上的间隔并在查询失败时通过actions.showAlert或actions.logError输出诊断信息。RunJS 查询无法被中止在 frontend/src/AppBuilder/QueryManager/constants.js 中runjs被列入ABORT_UNSUPPORTED_KINDS——它运行在浏览器内无法像 fetch 类查询那样通过 AbortController 取消因此停止必须依赖代码层面的clearInterval而非 UI 的取消按钮。错误定位提示RunJS 执行出错时查询面板会返回{ status: failed, data: { message, description, lineNumber } }其中lineNumber由执行堆栈解析而来见 queryPanelSlice.js可据此快速定位脚本中的语法或逻辑错误。按照以上 7 个步骤你的 ToolJet 应用即可按指定时间间隔动态获取数据实现自动化、高效的定时刷新体验——该方法适用于数据大屏、实时看板、接口轮询等需要周期性更新数据的应用场景。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考