Javascript – Verwendung von setTimeout

Question

http://ife.baidu.com/course/d...
Ich beantworte eine Frage der Baidu Front-End Academy, der Link ist oben. Das Thema besteht darin, eine binäre Baumdurchquerung zu implementieren. Der js-Code lautet wie folgt:

//绑定变量
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;
}

Es gibt keinen Fehler im Code, aber ich verstehe einfach nicht, warum timer+=100 für die Zeit in setTimeout verwendet wird.
Warum kann 100 nicht direkt verwendet werden?
Ich bin verwirrt. Front-End-Neuling, bitte geben Sie mir einen Rat!

Answer 1

这个代码的意思是遍历到的节点先显示为红色，再显示为白色，再下一个节点继续
间隔都为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左右执行

再占个坑，等会填

Answer 2

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