为啥 jQuery.sortable 的这个 ajax 会多次执行更新？

Posted 2023-02-24

【中文标题】为啥 jQuery.sortable 的这个 ajax 会多次执行更新？

【英文标题】：Why does this ajax for jQuery.sortable execute updates multiple times?为什么 jQuery.sortable 的这个 ajax 会多次执行更新？

【发布时间】：2018-02-05 15:22:53

【问题描述】：

这是这个问题的延续：jQuery UI Sortable, then write order into a database

问题如下：

我想使用 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>

当您使用序列化选项时，它将创建一个如下所示的 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 次，如果您需要管理大量项目，则会导致更多可能的错误并使网页变慢。

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

【问题讨论】：

鉴于您的示例，这似乎是不可避免的。因为如果您将第 4 个项目移动到第一个位置，您的脚本将不仅需要更新被移动项目的位置（顺序），还需要更新它之前的所有记录。如果这是不可接受的，那么您是否可以在每个元素重新定位后关闭 AJAX 请求，而仅在用户按下提交后才发送您的表单数据？

嗯...嗯，你是对的，这似乎是处理这个问题的好方法。我会试试的

【参考方案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'
    );

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