yyx990803/api.html

## api.html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            // coolshell api
            function xss_ajax(url, callback) {
                 var script_id = null;
                 var script = document.createElement('script');
                 script.setAttribute('type', 'text/javascript');
                 script.setAttribute('src', url);
                 script.setAttribute('id', 'coolshell_script_id');

                    script.onload = script.onreadystatechange = function(){
                            if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
                                    callback && callback();
                            }
                    };

                 script_id = document.getElementById('coolshell_script_id');
                 if(script_id){
                         document.getElementsByTagName('head')[0].removeChild(script_id);
                 }

                 // Insert <script> into DOM
                 document.getElementsByTagName('head')[0].appendChild(script);
            }

            var xss_callbacks = {} // 容纳callbacks

            function xss_rpc_call(n, callback) {

                    // 设置对应的jsonp callback
                    var callbackName = encodeURI('xss_callbacks[' + n + ']');

                    var url = "http://coolshell.cn/t.php?n="+n+"&callback="+callbackName;
                    xss_ajax(url);

                    // 现在每一次请求对应一个不同的callback
                    xss_callbacks[n] = function(result){
                         callback && callback(result);
                    }
            }

        </script>
    </head>
    <body>
        <div id="result"></div>
        <script>
            var resultEl = document.getElementById('result')

            function async (x) {

                var responses = [],
                    completed = 0

                for (var i = 0; i < x; i++) {
                    (function (i) {
                        xss_rpc_call(i, function (res) {
                            responses[i] = res
                            completed++
                            if (completed === x) done(x)
                        })
                    })(i)
                }

                function done (x) {
                    var result = ''
                    for (var i = 0; i < x; i++) {
                        result += i + ' ' + responses[i] + '<br>'
                    }
                    resultEl.innerHTML = result
                    callbacks = {} // 重置callbacks
                }

            }

            async(20)
        </script>
    </body>
</html>

## callback.js
var responses = [],
    completed = 0

function foo (x) {
    for (var i = 0; i < x; i++) {
        (function (i) {
            var order = i
            callRemote(i, function (res) {
                responses[i] = res
                completed++
                if (completed === x) {
                    done(x)
                }
            })
        })(i)
    }
}

function done (x) {
    responses.forEach(function (res) {
        console.log(res)
    })
}

// fake remote
function callRemote (x, callback) {
    setTimeout(function () {
        callback(x + ' : ' +Date.now())
    }, Math.random() * 300 + 300)
}

foo(20)

// Example output
//
// 0 : 1362499999361
// 1 : 1362499999290
// 2 : 1362499999267
// 3 : 1362499999433
// 4 : 1362499999309
// 5 : 1362499999442
// 6 : 1362499999306
// 7 : 1362499999223
// 8 : 1362499999411
// 9 : 1362499999265
// 10 : 1362499999274
// 11 : 1362499999332
// 12 : 1362499999243
// 13 : 1362499999473
// 14 : 1362499999230
// 15 : 1362499999233
// 16 : 1362499999443
// 17 : 1362499999227
// 18 : 1362499999454
// 19 : 1362499999479
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script>
	// coolshell api
	function xss_ajax(url, callback) {
	var script_id = null;
	var script = document.createElement('script');
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', url);
	script.setAttribute('id', 'coolshell_script_id');

	script.onload = script.onreadystatechange = function(){
	if((!this.readyState \|\| this.readyState === "loaded" \|\| this.readyState === "complete")){
	callback && callback();
	}
	};

	script_id = document.getElementById('coolshell_script_id');
	if(script_id){
	document.getElementsByTagName('head')[0].removeChild(script_id);
	}

	// Insert <script> into DOM
	document.getElementsByTagName('head')[0].appendChild(script);
	}

	var xss_callbacks = {} // 容纳callbacks

	function xss_rpc_call(n, callback) {

	// 设置对应的jsonp callback
	var callbackName = encodeURI('xss_callbacks[' + n + ']');

	var url = "http://coolshell.cn/t.php?n="+n+"&callback="+callbackName;
	xss_ajax(url);

	// 现在每一次请求对应一个不同的callback
	xss_callbacks[n] = function(result){
	callback && callback(result);
	}
	}

	</script>
	</head>
	<body>
	<div id="result"></div>
	<script>
	var resultEl = document.getElementById('result')

	function async (x) {

	var responses = [],
	completed = 0

	for (var i = 0; i < x; i++) {
	(function (i) {
	xss_rpc_call(i, function (res) {
	responses[i] = res
	completed++
	if (completed === x) done(x)
	})
	})(i)
	}

	function done (x) {
	var result = ''
	for (var i = 0; i < x; i++) {
	result += i + ' ' + responses[i] + '<br>'
	}
	resultEl.innerHTML = result
	callbacks = {} // 重置callbacks
	}

	}

	async(20)
	</script>
	</body>
	</html>
	var responses = [],
	completed = 0

	function foo (x) {
	for (var i = 0; i < x; i++) {
	(function (i) {
	var order = i
	callRemote(i, function (res) {
	responses[i] = res
	completed++
	if (completed === x) {
	done(x)
	}
	})
	})(i)
	}
	}

	function done (x) {
	responses.forEach(function (res) {
	console.log(res)
	})
	}

	// fake remote
	function callRemote (x, callback) {
	setTimeout(function () {
	callback(x + ' : ' +Date.now())
	}, Math.random() * 300 + 300)
	}

	foo(20)

	// Example output
	//
	// 0 : 1362499999361
	// 1 : 1362499999290
	// 2 : 1362499999267
	// 3 : 1362499999433
	// 4 : 1362499999309
	// 5 : 1362499999442
	// 6 : 1362499999306
	// 7 : 1362499999223
	// 8 : 1362499999411
	// 9 : 1362499999265
	// 10 : 1362499999274
	// 11 : 1362499999332
	// 12 : 1362499999243
	// 13 : 1362499999473
	// 14 : 1362499999230
	// 15 : 1362499999233
	// 16 : 1362499999443
	// 17 : 1362499999227
	// 18 : 1362499999454
	// 19 : 1362499999479