問(wèn)題描述

http://ife.baidu.com/course/d...在做百度前端學(xué)院的題目，鏈接如上。題目是實(shí)現(xiàn)一個(gè)二叉樹(shù)的遍歷。js代碼如下：

//綁定變量var root=document.getElementById('root');var btn1=document.getElementById('btn1');var btn2=document.getElementById('btn2');var btn3=document.getElementById('btn3');var timer=0;//顯示節(jié)點(diǎn)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]); }}//使用遞歸方式實(shí)現(xiàn)中序遍歷function inOrder(node){ if(!(node == null)){//alert('btn2');inOrder(node.children[0]);//先訪問(wèn)左子樹(shù)showNode(node);//再訪問(wèn)根節(jié)點(diǎn)inOrder(node.children[1]);//最后訪問(wèn)右子樹(shù) }}//后序遍歷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;}

代碼沒(méi)有錯(cuò)誤，就是不能理解為什么setTimeout中的時(shí)間要用timer+=100?為什么不能直接用100呢？百思不得其解。前端小白，求指教！

問(wèn)題解答

這個(gè)代碼的意思是遍歷到的節(jié)點(diǎn)先顯示為紅色，再顯示為白色，再下一個(gè)節(jié)點(diǎn)繼續(xù)間隔都為0.1秒為什么要+=100，而不是100異步先不論，簡(jiǎn)單來(lái)說(shuō) 函數(shù)的執(zhí)行只有一瞬，遍歷已經(jīng)完成可以理解為如果執(zhí)行函數(shù)的時(shí)間點(diǎn)為 0s ,那么所有setTimeout(xxx,100)的執(zhí)行之間點(diǎn)在 0.1s后（添加到任務(wù)隊(duì)列，真正執(zhí)行的具體時(shí)間不一定準(zhǔn)確在0.1s，不過(guò)這都不是重點(diǎn)，所以括號(hào)里面不需要理解，以后會(huì)知道的）意思就是所有的setTimeout()在一瞬間完成（感覺(jué)js會(huì)什么都不干）

那么 +=100意思就是setTimeout(xxx,100)setTimeout(xxx,200)setTimeout(xxx,300)....... 這些就會(huì)每隔0.1s左右執(zhí)行

再占個(gè)坑，等會(huì)填

timer+=100，保留一定的時(shí)間間隔，可能是想以明顯效果的方式，讓你看到節(jié)點(diǎn)遍歷的過(guò)程。