AJAXおよびjQueryキューを使用して設定を一貫して保存する

こんにちは、同僚！



プロジェクトの1つで、ユーザーが選択した設定（チェックボックスの形式で作成）を保存する必要がありました。 設定はめったに変更されないと想定されていたため、設定を一度にすべて転送するのではなく、一連の変更として転送することにしました。 カットの下の実装の詳細。



問題のステートメントから始めましょう。 連絡先情報のセットであるオブジェクトがあります。 ユーザーは保存するフォームを選択し、その後、オブジェクトはサーバー上の目的のフォームに変換されます。 ただし、ユーザーはすべての情報を保存するのではなく、関心のある部分のみを保存することができます。 これを行うには、彼は選択肢を与える必要があります-何を保持するか。



非同期のAJAXリクエストだけで保存できますが、この場合、次の変更がサーバーに送信されて途中でスタックし、ユーザーが既に連絡先を保存しようとしているときにあまり快適ではない状況が発生する可能性があります。 その結果、彼は期待したとおりの結果を得られません。 問題が発生します-変更が厳密に正しい順序で保持されるようにする方法。 このために、jQueryで使用可能なキューを使用することにしました。



jQueryのキューは、アニメーションと効果を実装するために使用されますが、必要なアクションを順番に実行するためだけにそれらを使用することを誰も気にしません。 その結果、私はこのコードのようなものを得ました：

function ajaxQueue(func){ $(document).queue("ajax",func); if($(document).queue("ajax").length == 1) $(document).dequeue("ajax"); } $(".contact input:checkbox") .change(function(){ var $_ = $(this), checked = $_.is(":checked"), $_.attr("disabled","disabled"); ajaxQueue(function(){ $.post("/ajax/check_elem", {name: $_.attr("id"), value: checked}) .error(function(){ $_.val((!checked)?"on":"off"); }) .complete(function() { $_.removeAttr("disabled"); $(document).dequeue("ajax"); }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

チェックボックスを切り替えると、新しいステップがキューに入れられます-サーバーに変更を送信する機能。 同時にキューが空だった場合、関数はすぐに実行のために起動されます（ajaxQueue関数でデキュー）。 関数でAJAXリクエストを実行した後、次のステップがキューから取得されて実行されます。



連絡先を保存する要求は同じ方法でキューに入れられ、すべての変更が機能した後に実行されます。

 function doAction(link){ $.get(link, function(data){ $('body').append(data); }, 'html'); } $("a.saveButton") .click(function(){ ajaxQueue(doAction($(this).attr("href"))); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PS：この記事を書いている過程で、連絡先を保存する前にチェックボックスのすべての状態を一括で転送する方が簡単だという結論に達しました（記事を書くのがなぜ有用なのかという質問です））他のタスク。