JavaScript 高级计时器 练习实战

HTML5学堂：JavaScript 高级计时器 练习实战。在文章《JavaScript 高级计时器 详细分析》中书写了高级计时器，并从线程、内存等角度对高级计时器进行了分析。既然说了半天理论，本文就发几个计时器的练习吧~学以致用，才是王道！

范例：

写出以下执行的结果

1. function test(){
2.  
3.     for(var i = 1; i <= 4; i++){
4.        setTimeout(function(){
5.           console.log(i);
6.        },0)
7.     }
8. }test();

这道题，有些学生会误答为： 1 2 3 4。而真正的答案是：5 5 5 5。这道题就和我们之前提到的线程的问题相关了。计时器中的函数是被排序在了线程当中，而不是在0秒之后就执行了。那么此时，所有计时器中的函数应当都是在for循环结束之后才能执行，那么在for循环执行完毕之后，i值已经变化为了5。此时再去打印i值，自然打印出来的是5了，又因为在for循环中设置了4个计时器，自然就是打印四次了。

欢迎沟通交流~HTML5学堂

再来看一个例子：

下面执行setTimeout里的方法的毫秒数为

A、立即执行B、约500 C、约1000 D、约1500

1. var curDate = new Date();
2.  
3. setTimeout(function(){
4.      console.log('独行冰海');
5. },500);
6. while(new Date()-curDate<1000){
7.  
8. }

上面这道题的结果应当是C。虽然在最初，在执行队列当中500毫秒的位置，添加了计时器中的函数。那么之后继续执行代码，运行到while语句时，持续1秒钟，执行队列当中均是被占满的。此时，计时器中的函数就不得不延迟运行，因此，计时器中的函数大约是在1秒后运行的。

最后，再来个例子：

此代码效果是什么？

1. <ul id="demo">
2.  
3.    <li>独行冰海</li>
4.    <li>HTML5 - WEB前端 - 网页制作</li>
5.    <li>梦幻雪冰</li>
6.  </ul>
7.  
8. <script>
9. var lis=document.getElementsByTagName('li');
10. for(var i=0,len=lis.length;i<len;i++){
11.    setTimeout(lis[i].style.backgroundColor='red',5000);
12. }
13. </script>

这道题是比较经典的一道题，除了考察了计时器之外，还考察了函数赋值的问题。

本题的运行效果是，在刷新页面的时候，ul中li的背景颜色本身就是红色的（换句话说，修改背景颜色的样式代码被立即执行了），之后在五秒后，报错，red is not defined（同时报3个错误）

欢迎沟通交流~HTML5学堂