首頁  >  問答  >  主體

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呢?
百思不得其解。前端小白,求指教!

phpcn_u1582phpcn_u15822662 天前1028

全部回覆(2)我來回復

  • 代言

    代言2017-07-05 10:44:09

    這個程式碼的意思是遍歷到的節點先顯示為紅色,再顯示為白色,再下一個節點繼續
    間隔都為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左右執行

    再佔個坑,等一下會填

    回覆
    0
  • 三叔

    三叔2017-07-05 10:44:09

    timer+=100,保留一定的時間間隔,可能是想以明顯效果的方式,讓你看到節點遍歷的過程。

    回覆
    0
  • 取消回覆