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