takkyuuplayer/ex1.html

## ex1.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  </head>
  <body>
    <ul id="async_test">
      <li>0</li>
    </ul>
    <script language="javascript">
      var time_ms = 1000;
      var ajax = function(arg) {
        var deferred = $.Deferred();
        setTimeout(function() {
          deferred.resolve(arg+1);
        }, time_ms);

        return deferred.promise();
      }

      var tmpl = _.template('<li><%= count %> : <%= wait %>ms later</li>');
      ajax(0).done(function(ret) {
        $('ul#async_test').append(tmpl({count:ret, wait:time_ms}));
      });

    </script>
  </body>
</html>

## ex2.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  </head>
  <body>
    <ul id="async_test">
      <li>0</li>
    </ul>
    <script language="javascript">
      var time_ms = 1000;
      var ajax = function(arg) {
        var deferred = $.Deferred();
        setTimeout(function() {
          deferred.resolve(arg+1);
        }, time_ms);

        return deferred.promise();
      }

      var tmpl = _.template('<li><%= count1 %> / <%= count2 %> </li>');
      $.when(ajax(0), ajax(100)).done(function(ret1, ret2) {
        $('ul#async_test').append(tmpl({count1:ret1, count2:ret2}));
      });

    </script>
  </body>
</html>

## ex3.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  </head>
  <body>
    <ul id="async_test">
      <li>0</li>
    </ul>
    <script language="javascript">
      var time_ms = 1000;
      var ajax = function(arg) {
        var deferred = $.Deferred();
        setTimeout(function() {
          deferred.resolve(arg+1);
        }, time_ms);

        return deferred.promise();
      }

      var deferreds = [];
      for (var i=0; i<20; i++) {
        deferreds.push(ajax(i*10));
      }

      var tmpl = _.template('<li><%= text %></li>');
      $.when.apply(null, deferreds).done(function() {
        var rets = Array.prototype.slice.call(arguments);
        $('ul#async_test').append(tmpl({text:rets.join(' / ')}));
      });

    </script>
  </body>
</html>

## ex4.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  </head>
  <body>
    <ul id="async_test">
      <li>0</li>
    </ul>
    <script language="javascript">
      var time_ms = 1000;
      var ajax = function(arg) {
        var deferred = $.Deferred();
        setTimeout(function() {
          deferred.resolve(arg+1);
        }, time_ms);

        return deferred.promise();
      }

      var deferreds = [];
      var max = 20;
      for (var i=0; i<max; i++) {
        deferreds.push(function(arg) { return ajax(arg*10); });
      }

      var rets = [];
      var do_next = function() {
        if(deferreds.length == 0 ) {
          var tmpl = _.template('<li>Finished</li>');
          $('ul#async_test').append(tmpl({text:rets.join(' / ')}));

          return;
        }

        var arg = max - deferreds.length;
        var deferred = deferreds.shift();
        deferred(arg).done(function(ret) {
          rets.push(ret);
          var tmpl = _.template('<li>Process : <%= text %></li>');
          $('ul#async_test').append(tmpl({text:rets.join(' / ')}));
          do_next();
        });
      };

      do_next();

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
	</head>
	<body>
	<ul id="async_test">
	<li>0</li>
	</ul>
	<script language="javascript">
	var time_ms = 1000;
	var ajax = function(arg) {
	var deferred = $.Deferred();
	setTimeout(function() {
	deferred.resolve(arg+1);
	}, time_ms);

	return deferred.promise();
	}

	var tmpl = _.template('<li><%= count %> : <%= wait %>ms later</li>');
	ajax(0).done(function(ret) {
	$('ul#async_test').append(tmpl({count:ret, wait:time_ms}));
	});

	</script>
	</body>
	</html>