Javascript – Verwendung von setTimeout
phpcn_u1582
phpcn_u1582 2017-07-05 10:42:09
0
2
963

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!

phpcn_u1582
phpcn_u1582

Antworte allen (2)
代言

这个代码的意思是遍历到的节点先显示为红色,再显示为白色,再下一个节点继续
间隔都为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,保留一定的时间间隔,可能是想以明显效果的方式,让你看到节点遍历的过程。

      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!