AJAX合理化技術？

Question

私の質問は少し抽象です。

AJAXリクエストが行われたときに出現するAJAXプリローダー/スピナーにはすべて慣れています。私の質問は、どうやってこれらを避けるのですか？

たとえば、ソート可能なリストを取ります。ユーザーがアイテムをドラッグアンドドロップしてそれらを整理すると、オーダーを更新するためのAJAX呼び出しが行われます。

これまでは、AJAXコールが完了するまでユーザーが何もしないように、フルスクリーンのAJAXスピナーをポップアップしました。

私はAJAXスピナーを回避し、ユーザーが2秒で20個のAjaxリクエストを開始し、順番に実行されるようにするためにajaxリクエストを合理化する方法を教えてください。

私は実際にはコード例、受け入れられたまたは普及した技術/アイデアは必要ありません。それとも、私がここで完全にオフになっている場合。

は選択肢の一つは、クライアント上の要求キューのいくつかの種類を作成することができ

Answer 1

更新

あなたが

望むものを達成するためにこれに代えて async javascript libraryを使用している場合、それは、何をキューにあなたを助けます彼らはloadeであることを確認するために、配列またはキューを使用しての面でこれまで

以下

古い良い答えdと1つずつ返されます。私は、Gmailのやり方に似たスピナーをすべて削除して、必要なときだけユーザーにメッセージを送ります。これらすべてのスピナー取引についてユーザーに気にする点はありません。彼らはちょうど小さなロボットの穴のように見える。ここで私は何かをするコードです。

私はこれにうなずいたので、その機能について説明します。

1. 停止キューにエラーが
2. 発生した場合、成功は
3. を発生するようキューを継続私はプラグインを作成コンテキスト

の成功/エラーのためのイベントハンドラを持って、これはプラグインの価値があるという考えですか？私はそうは思わないが、あなたは決して知りません。

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

これで完了です。

Answer 2

ありがとうございます。ユーザーが2つの項目をソートすると、項目がキューに追加され、実行が開始されます。最初の呼び出しが完了する前に別のソートが発生すると、その呼び出しはキューに入れられ、最初の呼び出しが完了した後に実行されます。

UPDATE：
あなたがのために必ず同期要求が行われた場合に、処理する必要があります。この段階では、すべてのAjaxリクエストを何らかの方法で隠しフィールド（アイデア）に格納し、同期リクエスト自体の前にサーバーで処理する必要があります。

Answer 3

保留中のajaxリクエストをキューに入れる（そして一緒にバンドルする） "ajaxリクエストマネージャ"を作ることができます。私は、多くのAjaxで更新可能なコントロールを持つ複雑なアプリケーションを持っています。私は、更新されているコントロールに対してのみスピナーを示します。ドラッグ可能なリストはサーバー上のものだけを更新するので、おそらくスピナーなしで逃げることができます。

Answer 4

私はあなたのjqueryのキューを示唆することは、AJAXリクエストやアニメーションキュー...

Answer 5

この回答は、ビット抽象的ですが、jQueryの繰延オブジェクトを見てみましょう：http://api.jquery.com/category/deferred-object/

それは基本的にあなたが読むことができるAJAX呼び出しにいくつかの状態情報を追加しますので、それは、あなたの環境で役立つ場合があります/意志で更新する。

Answer 6

• は中央の要求Q.
• 、すべての上に隠されたスピナーを持っています。一時的にすべての要求を保持し、それゆえpesudoコードはこのようなものになるだろうことを、中央アレイを有する

中央要求Q ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

あなたはproabably何らかのエラーキャッチを行う必要があります/再試行、しかし、あなたは大まかなアイデアを得る。

グローバルスピナー 必要に応じてトップスピナーでフェードインし、必要がない場合はフェードアウトしてください。

Answer 7

jqueryにasyncオプションがありますか？

async: trueを使用して要求をキューに入れます。

スピナーは、と同じリクエストを再度送信しないようにしています。ユーザーが同じボタンを再びクリックすると、同じリクエストが何度も繰り返し送信されています。これらのケースでは、スピナーのみを使用してください。

大きなボックスをポップアップすると、ページ全体へのアクセスを避けることができます...愚かなアイデア（犯罪なし）です。

何らかの方法で処理または操作されている特定の要素にスピナーを使用します。要求のために、ただ非同期を使用してください...

ケースクローズ;）