fillano/test755.html

## test755.html
<!DOCTYPE HTML">
<html>

<head>
<meta charset="utf-8" />
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<!-- CSS -->
<style type="text/css">
div
{
	background:#aaa;
	width:18px;
	height:18px;
	position:absolute;
	top:10px;
}
</style>

<!-- JavaScript -->
<script>
var funs = [
	function() {
	    console.log('func 1 start');
		$("#block1").animate({left:"+=100"}, 3000, function(){console.log('animation 1 end');setTimeout(goNext, 0);});
		console.log('func 1 end');
	},
	function() {
	    console.log('func 2 start');
		$("#block1").css("background","#ff0000");
		//暫停 3 秒 (模擬要做 3 秒的事情)
		console.log('before sleep');
		sleep(3000);
		console.log('after sleep');
		goNext();
		console.log('func 2 end');
	},
	function() {
	    console.log('func 3 start');
		$("#block1").animate({left:"+=100"}, 3000, function(){console.log('animation 2 end');});
		console.log('func 3 end');
	}
];

$(document).ready(function(){
    console.log('document ready start');
	goNext();
	console.log('document ready end');
});
var c=0;
var stack = [];
function goNext()
{
    c++;
    console.log('goNext ' + c + ' start');
    stack.push(c);
	var fun = funs.shift();
	fun();
	var d = stack.pop();
    console.log('goNext ' + d + ' end');
}

function sleep(milliseconds)
{
    console.log('sleep start');
	var start = new Date().getTime();
	while(1)
	{
		if ((new Date().getTime() - start) > milliseconds)
		{
			break;
		}
	}
	console.log('sleep end');
}
</script>
</head>

<body>
	<div id="block1"></div>
</body>
</html>
	<!DOCTYPE HTML">
	<html>

	<head>
	<meta charset="utf-8" />
	<!-- jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

	<!-- CSS -->
	<style type="text/css">
	div
	{
	background:#aaa;
	width:18px;
	height:18px;
	position:absolute;
	top:10px;
	}
	</style>

	<!-- JavaScript -->
	<script>
	var funs = [
	function() {
	console.log('func 1 start');
	$("#block1").animate({left:"+=100"}, 3000, function(){console.log('animation 1 end');setTimeout(goNext, 0);});
	console.log('func 1 end');
	},
	function() {
	console.log('func 2 start');
	$("#block1").css("background","#ff0000");
	//暫停 3 秒 (模擬要做 3 秒的事情)
	console.log('before sleep');
	sleep(3000);
	console.log('after sleep');
	goNext();
	console.log('func 2 end');
	},
	function() {
	console.log('func 3 start');
	$("#block1").animate({left:"+=100"}, 3000, function(){console.log('animation 2 end');});
	console.log('func 3 end');
	}
	];

	$(document).ready(function(){
	console.log('document ready start');
	goNext();
	console.log('document ready end');
	});
	var c=0;
	var stack = [];
	function goNext()
	{
	c++;
	console.log('goNext ' + c + ' start');
	stack.push(c);
	var fun = funs.shift();
	fun();
	var d = stack.pop();
	console.log('goNext ' + d + ' end');
	}

	function sleep(milliseconds)
	{
	console.log('sleep start');
	var start = new Date().getTime();
	while(1)
	{
	if ((new Date().getTime() - start) > milliseconds)
	{
	break;
	}
	}
	console.log('sleep end');
	}
	</script>
	</head>

	<body>
	<div id="block1"></div>
	</body>
	</html>