HTMX在计数器中批量更新

Question

我想知道是否可以以某种方式批处理请求数据，并且在去抖/节流期后仅发送一个请求，不使用客户端 JavaScript。

例如，假设我有以下简单计数器（由于我使用 Bun + Elysia，所以采用 JSX 模板形式）：

function Counter() {
  return (
    <div>
      <button hx-post="/increment" hx-target="#count">
        -
      </button>
      <div id="count">{count}</div>
      <button hx-post="/decrement" hx-target="#count">
        +
      </button>
    </div>
  );
}

是否有任何方法可以更改增量/减量逻辑，例如，我可以对 300 毫秒时间窗口内发生的任何点击进行批处理，并发送请求以更新差异，例如类似于

hx-post={`/update${inc - dec}`} 

？

Answer 1

不幸的是，如果不使用客户端 JavaScript，就无法批量请求或实现 debounce/throttle 逻辑。原因是 HTML 和 Node.js 等服务器端语言无法实时控制浏览器中的用户交互。他们只能响应已发送到服务器的请求。

您所描述的功能需要对用户交互进行实时控制，这只能通过客户端 JavaScript 来实现。您需要使用 JavaScript 来监听按钮点击，在检测到第一次点击时启动计时器，然后在计时器到期时向服务器发送包含点击总数的请求。

以下是如何使用 JavaScript 实现此功能的基本示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  let timer = null;

  const handleClick = (increment) => {
    setCount(count + increment);

    if (timer !== null) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fetch(`/update${count}`, { method: 'POST' });
      timer = null;
    }, 300);
  };

  return (
    <div>
      <button onClick={() => handleClick(-1)}>
        -
      </button>
      <div id="count">{count}</div>
      <button onClick={() => handleClick(1)}>
        +
      </button>
    </div>
  );
}