如何用htmx实现定时自动刷新直至内容不再更新？

可以实现这个需求，核心是通过HTMX的定时触发功能结合客户端逻辑，跟踪数值变化并在数值停止增长时终止自动刷新。具体实现如下：

代码示例 #

HTML结构 #

给目标元素添加自定义属性记录历史数值，同时配置HTMX的定时触发：

<td style="White-space: nowrap;">
  <div hx-get="/jobtime/2416" 
       hx-swap="outerHTML"
       hx-trigger="every 60s"
       data-last-value="157.0"
  >157.0</div>
</td>

客户端逻辑（JavaScript） #

监听HTMX的内容替换完成事件，对比数值变化并控制刷新行为：

document.addEventListener('htmx:afterSwap', function(event) {
  const targetEl = event.target;
  // 仅处理带有历史数值标记的元素
  if (!targetEl.hasAttribute('data-last-value')) return;

  const currentVal = parseFloat(targetEl.textContent.trim());
  const lastVal = parseFloat(targetEl.getAttribute('data-last-value'));

  if (currentVal === lastVal) {
    // 数值不再增长，移除定时触发属性停止刷新
    targetEl.removeAttribute('hx-trigger');
  } else {
    // 更新历史数值，继续下一轮定时刷新
    targetEl.setAttribute('data-last-value', currentVal);
  }
});

逻辑说明 #

1. 定时触发：hx-trigger="every 60s"配置元素每60秒自动向指定URL发起GET请求，并替换自身内容。
2. 数值跟踪：data-last-value属性用来存储上一次的任务时长，初始值设为页面加载时显示的数值。
3. 终止条件：每次内容替换完成后（htmx:afterSwap事件），对比当前数值与历史数值：
   • 若两者相等，说明任务时长停止增长，移除hx-trigger属性，终止自动刷新。
   • 若数值仍在增长，更新data-last-value为当前数值，保持定时刷新继续执行。

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