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">提交</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">提交</button>
</form>

处理包含多个输入的表单时，您可以在form标签上使用hx-sync的replace策略优先处理提交请求而非所有输入验证请求。这将取消任何进行中的验证请求，仅发出hx-post="/store"请求。如果您希望中止提交请求并优先处理任何现有验证请求，可以在form标签上使用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">提交</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">