javascript - utilisation de setTimeout

Question

http://ife.baidu.com/course/d...
Je pose une question de la Baidu Front-End Academy, le lien est ci-dessus. Le sujet est d'implémenter une traversée d'arbre binaire. Le code js est le suivant :

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

Il n'y a pas d'erreur dans le code, mais je n'arrive tout simplement pas à comprendre pourquoi timer+=100 est utilisé pour l'heure dans setTimeout
Pourquoi 100 ne peut-il pas être utilisé directement ?
Je suis perplexe. Débutant en front-end, donnez-moi quelques conseils !

Answer 1

La signification de ce code est que le nœud parcouru est d'abord affiché en rouge, puis en blanc, puis continue jusqu'au nœud suivant
L'intervalle est de 0,1 seconde
Pourquoi +=100 au lieu de 100
Ignorer l'asynchrone pour l'instant, en bref
L'exécution de la fonction ne prend qu'un instant et le parcours est terminé. Cela peut être compris comme : Si le point temporel d'exécution de la fonction est 0s, alors le point d'exécution de tous les setTimeout(xxx,100) sera 0,1. s plus tard (ajouté à la file d'attente des tâches, les détails d'exécution réels Le temps n'est pas nécessairement précis à 0,1 s près, mais ce n'est pas le sujet, il n'est donc pas nécessaire de comprendre les parenthèses, vous le saurez plus tard)
Cela signifie que tout setTimeout() est terminé en un instant (on a l'impression que js ne fera rien)

Ensuite, +=100

signifie

setTimeout(xxx,100)
setTimeout(xxx,200)
setTimeout(xxx,300).... Ceux-ci seront exécutés toutes les 0,1 s environ

Prenez un autre trou et remplissez-le plus tard

Answer 2

timer+=100, conservant un certain intervalle de temps, peut être pour vous permettre de voir le processus de traversée des nœuds avec des effets évidents.