単純なクライアント側の枠組み/パターンを簡素化との非同期通話?

Question

今現在使用しない重大なクライアント側の枠組みのほかjQuery（jQuery.ui+検証＋形態ウィザードのプラグイン).

問題が表面に数回の我々のコードです:

1. してエンターテインメントを開始し、Ajaxの通話はサーバー通信を行います。
2. 中には、表示設定-計算(電源)""アイコンとテキスト
3. 場合はサーバーを返します結果を速く（< 200ms）、"眠り"のための200millis用 setTimeout()), 防ちらを待ってアイコンとテキスト.
4. 後 max(the call returns, a minimal timeout), までの負荷のアイコンとテキスト.
5. して次のいずれかの条件が成立する表示エラーテキストがあった場合、一部の問題のajax通話のサーバーとならない500ものの、カスタムjsonる"というエラーメッセージ"。実際、時にはそういうような財産に対応りフォームフィールド...その試合のエラーをフォームフィール...閑話休題).
6. の場合は成功してくださ---ものにより異なります。

ようにしているため最小限のコード再利用、いずれかまたは再利用パターン/コード/枠組みのことがあるでしょうか。なんだろうな使用を開始し新しい重枠組みにこの日のために利用の場合、いかに私のオプションは---かなクライアント側の枠組みをいいます。があれば軽量な枠組みを必要としない私には全て自分のコードを逆に、思いった、状況に応じた使い分けは特定の場合には、それが実際に利用する代わりに飾をするつもりはありま

って聞いた Ember.js -では、フィット感の良いこの問題を解決するに当たって?い解決のですか？

Answer 1

$(function(){
 var buttonSelector = "#button";
 $('body').on({'click': function(evt){
    var $button = $(this);
    $button.toggleClass('loading');
    var time = new Date();
    $.get('some/ajax').then(function(data,text,jqXhr){
   // typical guess at load work
       $button.empty();
       $(data).wrap($button);
    }).fail(function(data,text,jqXhr){
     alert("failed");
    }).done(function(data,text,jqXhr){
       var elapsed = new Date();
      if((elapsed - time) < 200){
        alert("to short, wait");
      }
      $button.toggleClass('loading');
    });
  }},buttonSelector,null);
});

Answer 2

でを包む$.ajaxによる独自の機能です。そのように実践できる独自のqueing。私はあなたがい、jqueryコンポーネント.でできるかに強力で、例えばきのhttpヘッダ等
に関する枠組みお客様のご要望によります.
例えば、クリックします。Kendo UIでの枠組みのデータを作成するための資料http://demos.kendoui.com/web/datasource/index.html.

Answer 3

動作サンプルコード （よくほとんど）

とにかく @Defygravityの答えの線に沿って何かを求めていました - 彼のアイデアは良いですが、まだ擬似コード/完全には完全ではありません。これが私の作業コードです（ほとんど動作しているデモ, 、Ajax URL自体まで、UIは調整します）

コードと使用の例：

jQuery.fn.disable = function() {
    $(this).attr("disabled", "disabled");
    $(this).removeClass("enabled");

    // Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
    $(this).filter("button").button({disabled: true});
};
jQuery.fn.enable = function() {
    $(this).removeAttr("disabled");
    $(this).addClass("enabled");
    // Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
    $(this).filter("button").button({disabled: false});
};


function AjaxCallbackWaiter(ajaxUrl, button, notificationArea, loadingMessage, errorMessage, inSuccessHandler, inFailureHandler) {
    // Every request that takes less than this, will be intentionally delayed to prevent a flickering effect
    // http://ripper234.com/p/sometimes-a-little-sleep-is-ok/
    var minimalRequestTime = 800;
    var loadingIconUrl = 'http://loadinfo.net/images/preview/11_cyrcle_one_24.gif?1200916238';

    var loadingImageContent = $("<img class='loading-image small' src='" + loadingIconUrl + "'/><span class='loading-text'>" + loadingMessage + "</span>");
    var errorContentTemplate = $("<span class='error ajax-errors'></span>");

    var requestSentTime = null;

    button.click(clickHandler);

    function displayLoadingMessage() {
        clearNotificationArea();
        notificationArea.html(loadingImageContent);
    }

    function clearNotificationArea() {
        notificationArea.html("");
    }

    function displayError(message) {
        var errorContent = errorContentTemplate.clone(errorContentTemplate).html(message);
        notificationArea.html(errorContent);
    }

    function ajaxHandler(result) {
        var requestReceivedTime = new Date().getTime();
        var timeElapsed = requestReceivedTime - requestSentTime;
        // Reset requestSentTime, preparing it for the next request
        requestSentTime = null;

        var sleepTime = Math.max(0, minimalRequestTime - timeElapsed);

        function action() {
            clearNotificationArea();
            button.enable();
            if (result) {
                inSuccessHandler();
            } else {
                displayError(errorMessage);
                inFailureHandler();
            }
        }

        if (sleepTime <= 0) {
            action();
        } else {
            setTimeout(action, sleepTime);
        }
    }

    function failureHandler() {

    }

    function clickHandler(){
        if (requestSentTime !== null) {
            logError("Bad state, expected null");
        }
        requestSentTime = new Date().getTime();
        displayLoadingMessage();
        button.disable();
        $.get(ajaxUrl, 'json').then(ajaxHandler, failureHandler);
    }
}

// Usage:
var ajaxUrl = 'FILL IN YOUR OWN URL HERE';
var button = $("#clickme");
var notificationArea = $(".ajax-notification-area");

var waitingMessage = "Doing Stuff";
var errorMessage = "Not Good<br/> Please try again";

$(document).ready(function(){
  new AjaxCallbackWaiter(
    ajaxUrl,
    button, 
    notificationArea,
    waitingMessage,
    errorMessage,
    function(){
      alert("All is well with the world");
    },
    function(){
      alert("Not good - winter is coming");
    });
});