javascript - setTimeout的使用问题

问题描述

http://ife.baidu.com/course/d...在做百度前端学院的题目，链接如上。题目是实现一个二叉树的遍历。js代码如下：

//绑定变量var root=document.getElementById('root');var btn1=document.getElementById('btn1');var btn2=document.getElementById('btn2');var btn3=document.getElementById('btn3');var timer=0;//显示节点function showNode(node){ //node.style.backgroundColor = ’red’; alert(timer); setTimeout(function(){node.style.backgroundColor='red'; },timer+=100); setTimeout(function(){node.style.backgroundColor='#ffffff'; },timer+=100);}//先序遍历function preOrder(node){ if(!(node == null)){showNode(node);preOrder(node.children[0]);preOrder(node.children[1]); }}//使用递归方式实现中序遍历function inOrder(node){ if(!(node == null)){//alert('btn2');inOrder(node.children[0]);//先访问左子树showNode(node);//再访问根节点inOrder(node.children[1]);//最后访问右子树 }}//后序遍历function postOrder(node){ if(!(node == null)){postOrder(node.children[0]);postOrder(node.children[1]);showNode(node); }}//绑定事件btn1.onclick=function(){ preOrder(root); timer=0;}btn2.onclick=function(){ inOrder(root); timer=0;}btn3.onclick=function(){ postOrder(root); timer=0;}

代码没有错误，就是不能理解为什么setTimeout中的时间要用timer+=100?为什么不能直接用100呢？百思不得其解。前端小白，求指教！

问题解答

这个代码的意思是遍历到的节点先显示为红色，再显示为白色，再下一个节点继续间隔都为0.1秒为什么要+=100，而不是100异步先不论，简单来说 函数的执行只有一瞬，遍历已经完成可以理解为如果执行函数的时间点为 0s ,那么所有setTimeout(xxx,100)的执行之间点在 0.1s后（添加到任务队列，真正执行的具体时间不一定准确在0.1s，不过这都不是重点，所以括号里面不需要理解，以后会知道的）意思就是所有的setTimeout()在一瞬间完成（感觉js会什么都不干）

那么 +=100意思就是setTimeout(xxx,100)setTimeout(xxx,200)setTimeout(xxx,300)....... 这些就会每隔0.1s左右执行

再占个坑，等会填

timer+=100，保留一定的时间间隔，可能是想以明显效果的方式，让你看到节点遍历的过程。