hx-sync

hx-sync属性允许你在多个元素之间同步 AJAX 请求。

hx-sync 属性由一个 CSS 选择器组成，用于指示要同步的元素，后面可以跟一个冒号，然后是可选的同步策略。可用的策略包括：

drop - 如果现有请求正在进行中，则丢弃（忽略）此请求（默认）
abort - 如果现有请求正在进行中，则丢弃（忽略）此请求；如果不存在现有请求，如果在请求仍在进行中时发生另一个请求则中止此请求
replace - 中止当前请求（如果有），并将其替换为此请求
queue - 将此请求放入与给定元素关联的请求队列中

修饰符 queue 可以采用附加参数来准确指示如何排队：

queue first - 在请求正在发送时将第一个请求排队显示
queue last - 在请求正在发送时将最后一个请求排入队列
queue all - 对请求正在发送时出现的所有请求进行排队

笔记

hx-sync可以继承并放置在父元素上

此示例解决了表单提交请求和单个输入验证请求之间的竞争条件。通常情况下，在不使用 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>

如果你希望将验证请求的优先级设置为高于提交请求，则可以使用 drop 策略。此示例将使验证请求的优先级设置为高于提交请求，这样如果验证请求正在进行中，则无法提交表单。

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

处理包含许多输入的表单时，你可以在表单标签上使用 hx-sync replace 策略，使提交请求优先于所有输入验证请求。这将取消任何正在进行的验证请求并仅发出 hx-post="/store" 请求。如果你希望中止提交请求并优先处理任何现有验证请求，则可以在表单标签上使用 hx-sync="this:abort" 策略。

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

在实现主动搜索功能时，hx-trigger 属性的 delay 修饰符可用于消除用户输入的抖动，并避免在用户输入时发出多个请求。但是，一旦发出请求，如果用户再次开始输入，即使前一个请求尚未完成处理，也会开始新的请求。此示例将取消任何正在进行的请求并仅使用最后一个请求。如果搜索输入包含在目标中，使用 hx-sync 这种方式也有助于减少用户仍在输入时输入被替换的可能性。

<input type="search" 
    hx-get="/search" 
    hx-trigger="keyup changed delay:500ms, search" 
    hx-target="#search-results"
    hx-sync="this:replace">