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，保留一定的時間間隔，可能是想以明顯效果的方式，讓你看到節點遍歷的過程。