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