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">