js function nest | Huluoyang's Notebook

回到上一片文章的那道面试题：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="input" value="">
	<script>
		var input = document.getElementById('input');
		for(var i=0;i<3;i++){
			setTimeout(function(){
				input.value=i;
			},2000)
		}
	</script>
</body>
</html>

这道题目的初衷是考察对js异步和闭包的掌握，
但我对这个实现效果开始感兴趣：输入框的值两秒后变成0，再隔两秒后变成1，再隔两秒后变成2。
如何实现呢？在上篇文章讲过：即使用了闭包，结果依然不是我们想要的。
因为我们想要的效果每一步都依赖于上一步，只有等到上一步执行完，两秒后再执行下一步。
而在上篇文章中，每次都是一次性输出0，1，2，我们没法控制这个逻辑。
怎么解决呢？
其实很简单，函数嵌套。

setTimeout(function(){
	input.value=0;
	setTimeout(function(){
		input.value=1;
		setTimeout(function(){
			input.value=2;
		},2000)
	},2000)
},2000)

写过node的同学想必非常熟悉这个结构，这只有三层嵌套，但你们可能接触过十几层的嵌套。
你们晕吗？反正我不晕，我觉得代码挺简洁，也挺直观的。