为什么这个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'
    });
}

我们将看到脚本仅按照我们现在拥有的顺序执行一次，避免了性能下降和顺序错误。