HTML5学堂-码匠 HTML5学堂

您当前位于:高级JS、面向对象 ——> 原生JavaScript 计时器高级知识 实战案例

原生JavaScript 计时器高级知识 实战案例

2015/05/04 14:08:16 | 作者:HTML5学堂(码匠) | 分类:高级JS、面向对象 | 关键词:JavaScript,计时器,线程

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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS