Javascript 为什么这个ajax for jQuery.sortable会多次执行更新？

这是这个问题的继续：

问题如下：

我想使用jqueryui

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>

$( 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'
    });
}

此解决方案的问题在于：它不仅在每次移动项目时更新一次，而且还“存储”其他更新，并在您进行更新之前执行它们。因此，例如，如果移动4个项目，它将更新1+2+3+4次，这将导致更多可能的错误，并使网页在需要管理大量项目时变得更慢

---

我的问题很简单：为什么会这样？我怎样才能避免这种情况呢？

答案确实很简单（谢谢）。事实上，它所需要的只是添加一个按钮或类似的东西，并让它处理更新

让我们想象一下，我添加了一个带有

onclick=“save（）”

的按钮。如果我们将代码保留如下：

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

$( 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'
    });
}

---

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

对此的答案确实非常简单（谢谢）。事实上，它所需要的只是添加一个按钮或类似的东西，并让它处理更新

让我们想象一下，我添加了一个带有

onclick=“save（）”

的按钮。如果我们将代码保留如下：

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

$( 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'
    });
}

---

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

在您的示例中似乎是不可避免的。因为如果您将第四个项目移动到第一个位置，您的脚本不仅需要更新被移动项目的位置（顺序），还需要删除之前的所有记录。如果这是不可接受的，那么在重新定位每个元素后，您是否可以关闭AJAX请求，而只在用户按下submit后发送表单数据？嗯。。。你说得对，这似乎是一个很好的解决办法。我试试看，以你为例，这似乎是不可避免的。因为如果您将第四个项目移动到第一个位置，您的脚本不仅需要更新被移动项目的位置（顺序），还需要删除之前的所有记录。如果这是不可接受的，那么在重新定位每个元素后，您是否可以关闭AJAX请求，而只在用户按下submit后发送表单数据？嗯。。。你说得对，这似乎是一个很好的解决办法。我试试看