javascript - 简单的客户端框架/模式来简化异步调用？

Question

除了 jQuery(以及 jQuery.ui + 验证 + 表单向导插件)之外，我们目前没有使用任何严肃的客户端框架。

我们的代码中多次出现的问题是:

1. 我们有一个按钮可以启动对服务器的 Ajax 调用。
2. 通话时，我们会显示带有一些文字的“正在加载”图标
3. 如果服务器返回结果太快(例如 < 200 毫秒)，我们会“休眠”200 毫秒(使用 setTimeout())，to prevent flickering of the waiting icon & text .
4. 在max(调用返回，最小超时)之后，我们清除加载图标和文本。
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);
});