http://ife.baidu.com/course/d...
I am doing a question from Baidu Front-end Academy, the link is as above. The topic is to implement a binary tree traversal. The js code is as follows:
//綁定變量
var root=document.getElementById("root");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var timer=0;
//顯示節(jié)點
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]);
}
}
//使用遞歸方式實現(xiàn)中序遍歷
function inOrder(node){
if(!(node == null)){
//alert("btn2");
inOrder(node.children[0]);//先訪問左子樹
showNode(node);//再訪問根節(jié)點
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;
}
There is no error in the code, but I just can’t understand why timer =100 is used for the time in setTimeout?
Why can’t I use 100 directly?
I am puzzled. Front-end newbie, please give me some advice!
The meaning of this code is that the traversed node is first displayed in red, then in white, and then continues to the next node
The interval is 0.1 seconds
Why +=100 instead of 100
Ignore asynchronous for now, in short
The execution of the function only takes a moment, and the traversal has been completed. It can be understood as: If the time point of executing the function is 0s, then the execution point of all setTimeout(xxx,100) will be 0.1s later (added to the task queue, the actual execution details The time is not necessarily accurate to 0.1s, but this is not the point, so there is no need to understand the brackets, you will know it later)
It means that all setTimeout() is completed in an instant (it feels like js will do nothing)
Then +=100
setTimeout(xxx,100)
setTimeout(xxx,200)
setTimeout(xxx,300).... These will be executed every 0.1s or so
Take another hole and fill it in later
timer+=100, retaining a certain time interval, may be to let you see the process of node traversal with obvious effects.