jQuery.sortableのこのajaxが何度も更新を実行しますか？

Question

これは、この質問の続きです：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を使用して要素の配列を作成することです。だから、私は通常、このような何かを：あなたが作るのであればアイテム[] = 1つの&項目[] = 2など：あなたはシリアル化オプションを使用すると

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

、それはこのようなPOSTのクエリ文字列を作成します。たとえば、id属性のデータベースIDを使用すると、POSTされた配列を繰り返し処理し、それに応じて要素の位置を更新することができます。例えば

は、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' 
    }); 
} 

は、私たちは順番にパフォーマンスのダウングレードやエラーを避け、スクリプトは唯一我々が今持っているためで一度実行していることがわかります。