為什么這個jQuery.sortable的ajax會多次執行更新？

Question

這是該問題的延續： jQuery UI Sortable，然后將順序寫入數據庫

問題如下：

我想使用jQuery UI sortable函數來允許用戶設置訂單，然后在更改時將其寫入數據庫並進行更新。 有人可以寫一個例子來說明如何做到嗎？

由於我需要能夠快速重新排序商品，因此我認為這將非常有用。 但是，公認的解決方案存在很大的問題。 我在這里引用答案：

這是一個簡單的示例，一旦元素的位置發生變化，該數據便立即將數據發送到指定的URL。

 $('#element').sortable({ axis: 'y', update: function (event, ui) { var data = $(this).sortable('serialize'); // POST to server using $.post or $.ajax $.ajax({ data: data, type: 'POST', url: '/your/url/here' }); } }); 

它的作用是使用元素id創建元素數組。 因此，我通常會執行以下操作：

 <ul id="sortable"> <li id="item-1"></li> <li id="item-2"></li> ... </ul> 

當您使用serialize選項時，它將創建一個POST查詢字符串，如下所示：item [] = 1＆item [] = 2等。因此，如果您使用-例如-id屬性中的數據庫ID，則可以簡單地進行迭代通過POSTed數組並相應地更新元素的位置。

例如，在PHP中：

 $i = 0; foreach ($_POST['item'] as $value) { // Execute statement: // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value $i++; } 

這種解決方案的問題是：它不僅每次移動一個項目時都會更新一次，而且還會“存儲”其他更新並在您完成更新之前執行它們。 因此，例如，如果您移動4個項目，它將更新1 + 2 + 3 + 4次，從而導致更多的錯誤，如果您需要管理許多項目，則會使網頁變慢。

我的問題很簡單：為什么會這樣？ 我該如何避免呢？

Answer 1

答案確實非常簡單（感謝Lucas Krupinski ）。 實際上，所需要做的就是添加一個按鈕或類似的按鈕，並使其處理更新。

假設我添加了帶有onclick="save()"的按鈕。 如果我們留下這樣的代碼：

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
} );

function save(){
    var order = $("#sortable").sortable('serialize');
    console.log("order: " + order);
    $.ajax({
        data: order,
        type: 'POST',
        url: '/your/url/here'
    });
}

我們將看到腳本僅按照我們現在擁有的順序執行一次，避免了性能下降和順序錯誤。