使用 htmx.trigger 触发轮询

Question

我正在尝试使用 JavaScript 在 div 上触发轮询行为。

这是div。

<div id="myId" hx-get="https://xxxx" hx-swap="innerHTML"></div>

这是触发函数。

 htmx.trigger(
   htmx.find(`#myId`),
   "every 300ms"
 );

但它不起作用。有没有办法获得这种行为？

Answer 1

您可以让 JavaScript 设置轮询间隔。然后您可以触发自定义事件并让您的 div 监听它。

要让服务器停止客户端轮询，请在 Response Headers 中放置一个不同的自定义事件并在客户端上侦听它。其中包括如果您的服务器是 ASP.NET，您将如何添加响应 header，因为我不确定您是什么运行 server-side。另外 innerHTML 是默认的 hx-swap 目标，因此可以省略。

HTMX:

<div id="myId" hx-get="https://xxxx" hx-trigger="myEvent"></div>

JS:

// start polling
function startpolling(){
var myPoller= setInterval(function () {  htmx.trigger("myId","myEvent"); }, 300);
}

// stop polling
document.body.addEventListener("stopPolling", function(evt){
    clearInterval(myPoller);
})

ASP.NET 服务器代码：

HttpContext.Response.Headers.Add("HX-Trigger", "stopPolling");

使用 htmx.trigger 触发轮询

Trigger polling using htmx.trigger

htmx