mscalora/gist:b35d7910b8e5f0a9593c

## gistfile1.txt
<!doctype html>
<html>
    <head>
        <title>I Promise</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdn.rawgit.com/alexei/sprintf.js/master/src/sprintf.js"></script>
        <style>
            .rect {
                height: 40px;
                margin-bottom: 20px;
            }
            body {
                white-space: nowrap;
            }
            section {
                display: inline-block;
                width: 45%;
                vertical-align: top;
                margin: 2%;
            }
        </style>
    </head>
    <body>
        <div><button>Start</button></div>
        <section id="C1" Xwidth="40%">
            <div class="rect"></div>
            <pre class="log"></pre>
        </section><section id="C2" Xwidth="40%">
            <div class="rect"></div>
            <pre class="log"></pre>
        </section>
    </body>
    <script>
        var start;

        function log(id, s){
            var t = $.now() - start;
            $('#'+id+' .log').append(sprintf("%5d: %s\n",t,s));
        }

        function asyncForEach(f, steps) {
            var def = $.Deferred();
            function nextStep(index) {
                if (index<steps.length) {
                    f(steps[index]).then(function(){
                        nextStep(index+1);
                    },function(){
                        def.reject();
                    });
                } else {
                    def.resolve();
                }
            }
            nextStep(0);
            return def.promise();
        }

        function async_factory(id) {
            return function(param) {
                var def = $.Deferred();
                log(id, 'Step ' + param + ' is starting');
                $('#'+id+' .rect').css({background: param});
                setTimeout(function () {
                    log(id, 'Step ' + param + ' is finished '+(param!=='silver'?'':'rejecting!'));
                    def[param!=='silver'?'resolve':'reject']();
                }, param.length * 200);
                return def.promise();
            }
        }

        var sequence1 = [
            'red',
            'green',
            'blue',
            'orange',
            'yellow',
            'darkblue'
        ];

        var sequence2 = [
            'wheat',
            'deeppink',
            'gold',
            'violet',
            'silver',
            'tan'
        ];

        $('button').on('click',function(){
            start = $.now();

            log('C1', '>>> C1 steps about to start');
            asyncForEach(async_factory("C1"), sequence1).then(function(){
                log('C1', '>>> C1 steps are complete');
            });
            log('C1', '>>> C1 steps are started');

            log('C2', '>>> C2 steps about to start');
            asyncForEach(async_factory("C2"), sequence2).then(function(){
                log('C2', '>>> C2 steps are complete');
            });
            log('C2', '>>> C2 steps are started');

        });

    </script>
</html>
	<!doctype html>
	<html>
	<head>
	<title>I Promise</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.rawgit.com/alexei/sprintf.js/master/src/sprintf.js"></script>
	<style>
	.rect {
	height: 40px;
	margin-bottom: 20px;
	}
	body {
	white-space: nowrap;
	}
	section {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	margin: 2%;
	}
	</style>
	</head>
	<body>
	<div><button>Start</button></div>
	<section id="C1" Xwidth="40%">
	<div class="rect"></div>
	<pre class="log"></pre>
	</section><section id="C2" Xwidth="40%">
	<div class="rect"></div>
	<pre class="log"></pre>
	</section>
	</body>
	<script>
	var start;

	function log(id, s){
	var t = $.now() - start;
	$('#'+id+' .log').append(sprintf("%5d: %s\n",t,s));
	}

	function asyncForEach(f, steps) {
	var def = $.Deferred();
	function nextStep(index) {
	if (index<steps.length) {
	f(steps[index]).then(function(){
	nextStep(index+1);
	},function(){
	def.reject();
	});
	} else {
	def.resolve();
	}
	}
	nextStep(0);
	return def.promise();
	}

	function async_factory(id) {
	return function(param) {
	var def = $.Deferred();
	log(id, 'Step ' + param + ' is starting');
	$('#'+id+' .rect').css({background: param});
	setTimeout(function () {
	log(id, 'Step ' + param + ' is finished '+(param!=='silver'?'':'rejecting!'));
	def[param!=='silver'?'resolve':'reject']();
	}, param.length * 200);
	return def.promise();
	}
	}

	var sequence1 = [
	'red',
	'green',
	'blue',
	'orange',
	'yellow',
	'darkblue'
	];

	var sequence2 = [
	'wheat',
	'deeppink',
	'gold',
	'violet',
	'silver',
	'tan'
	];

	$('button').on('click',function(){
	start = $.now();

	log('C1', '>>> C1 steps about to start');
	asyncForEach(async_factory("C1"), sequence1).then(function(){
	log('C1', '>>> C1 steps are complete');
	});
	log('C1', '>>> C1 steps are started');

	log('C2', '>>> C2 steps about to start');
	asyncForEach(async_factory("C2"), sequence2).then(function(){
	log('C2', '>>> C2 steps are complete');
	});
	log('C2', '>>> C2 steps are started');

	});

	</script>
	</html>