内容

同步

你经常需要协调两个元素之间的请求。例如，你可能希望一个元素的请求优先于另一个元素的请求，或者等待其他元素的请求完成。

htmx 提供了一个hx-sync属性来帮助你实现这一点。

考虑以下 HTML 中表单提交和单个输入的验证请求之间的竞争条件：

<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
    >
    <button type="submit">Submit</button>
</form>

如果不使用hx-sync，填写输入并立即提交表单会触发两个并行请求 /validate和/store。

在输入上使用hx-sync="closest form:abort"将监视表单上的请求，如果存在表单请求，则中止输入的请求或在输入请求正在进行时启动：

<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
        hx-sync="closest form:abort"
    >
    <button type="submit">Submit</button>
</form>

这以声明的方式解决了两个元素之间的同步问题。

htmx 还支持以编程方式取消请求：你可以将htmx:abort事件发送到元素以取消任何正在进行的请求：

<button id="request-button" hx-post="/example">
    Issue Request
</button>
<button onclick="htmx.trigger('#request-button', 'htmx:abort')">
    Cancel Request
</button>

可以在属性页面上找到更多示例和详细信息hx-sync。