《JavaScript权威指南》第四版中说“window对象方法setTimeout()用来安排一个JavaScript的代码段在将来的某个指定时间运行”。

setTimeout(foo,i); // foo是回调函数，i是延时时间

注意“将来”一词，setTime会把foo函数放到队列中，当线程空闲的时候，JavaScript才会去执行队列里的事件。

看下面的代码：

<!DOCTYPE HTML>

<html>

  <head>

    <script type="text/javascript">

      window.onload = function () {

        var a = 0;

      function one() {

        for (var i = 0; i < 10; i++) {

          console.log(i);

          setTimeout(function(){

            console.log(a);

            a += i;

          },0);

        };

      }

      function two() {

        alert(a);

      }

        one();

        setTimeout(two,0);

      }

    </script>

  </head>

</html>

这里其实one函数看着像是会正常把a从0加到9，然后alert出来。

但实际上的alert结果是100，为什么？

one函数的for循环是不会因为setTimeout停下的，它遇到setTimeout的时候只会把里面的回调函数放到队列里面去，然后继续i++。等执行完所有的for循环才会去执行刚才放到队列的函数。因为循环完了所以i是10，总共有10个相同的a+=i;操作的函数被调用，最后a的结果就变成了100了。

但是其实上面代码有部分我还是不明白，就是如果setTimeout(two,0);改成setTimeout(two(),0);的话，alert的结果就变成了0。

setTimeout的第一个参数是函数对象，如果变成two()，那回调函数就变成了two的返回值，因为需要用到two的返回值，two函数就会直接执行，在执行的时候a没有发生任何变化，所以输出就是0了。

附上setTimeout不带参数的一些写法：

setTimeout("alert('3秒后执行我')",3000);                          // 直接把执行语句放在双引号里当参数

setTimeout(function(){alert("3秒后执行我");},3000);               // 直接把一个包含执行语句的匿名函数当参数

setTimeout(two,3000);                                           // 把指针当参数

setTimeout("two()",3000);                                      // 把two()函数放在双引号里当参数，相当于用eval()函数来解析他

setTimeout(function(){two();},3000);                           // 把要执行的函数放在一个匿名函数里当参数

带参数的写法：

setTimeout("two('"+arg1+"',"+"'"+arg2+"',"+....+"')",3000);           // 尽量不要用这一样，很容易弄错

setTimeout(two,3000,arg1,arg2....);                                  // 第一个参数是指针，第二个是延迟执行的时间，后面紧跟着的是调用函数所执行的参数

setTimeout(function(){two(arg1,arg2...);},3000);                     // 直接把要执行的函数已经参数放在匿名函数里当setTimeout的第一个参数

JavaScript学习之setTimeout的更多相关文章

  1. JavaScript学习笔记-setTimeout应用

    setTimeout应用 var ids = [];function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout( ...

  2. JavaScript学习之 倒计时

    倒计时很常见,例如离XX活动还有XX天XX小时XX分XX秒,然后逐秒减少,实现很简单,我只是想记录这过程中的一点小坑. 先上代码: <html> <head> <meta ...

  3. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  4. JavaScript学习05 定时器

    JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...

  5. Javascript学习7 - 脚本化浏览器窗口

    原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

  6. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  7. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  8. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  9. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

随机推荐

  1. 封装原生JavaScript的ajax

    function obj2str(data) { data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTi ...

  2. javascript date utc

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangbin10025/article/details/37503465 近期在使用highsto ...

  3. kafka理论

    一.消息队列,简称MQ,message queue 生产者:生存数据写到kafka,持久化到硬盘.对同一个Topic来讲,生产者通常只有‘一个’(可以多并发)数据保存时常可以配置,默认保存七天. 消费 ...

  4. Django部署，Django+uWSGI+nginx+Centos部署

    说明:系统是在windows上开发的,使用django1.11.4+python3.6.3开发,需要部署在centos6.4服务器上. 第一步:在Centos6.4上安装Python3.6.2 安装请 ...

  5. Css 进阶学习

    以下样式,表示css对第一个li标签无效,第一个以后的样式有效. .nav-pills>li+li { margin-left: 2px } <ul class="nav-pil ...

  6. [转]IE userData

    IE浏览器实现了它专属的客户端存储机制——“userData”.userData可以实现一定量的字符串数据存储,可以将其用做是Web存储的替代方案.本文将详细介绍IE userData 概述 在IE5 ...

  7. Eclipse安装FindBugs

    Eclipse安装FindBugs 1.使用Eclipse的help在线安装,安装地址” FindBugs - http://findbugs.cs.umd.edu/eclipse-daily“. 2 ...

  8. Hibernate: insert into xxx (name) values (?)但是数据库中没有数据

    学习hibernate 控制台提示 但数据库中没有任何数据被插入 同样的代码,参考例程中就有数据被插入 比较无解,删除部分代码,红框中的部分,运行一下,再贴回去,就好了

  9. python 索引上的合并

  10. LUOGU 2593 : [Zjoi2006] 超级麻将

    传送门 解题思路 直接爆搜全T..状态数太多了,所以我们考虑贪心+剪枝.贪心:先拿三个连着的,再拿四个一样的,再拿三个一样的,最后拿两个一样的这样的搜索顺序最优,两个的放最后是因为只要这样的一个,三个 ...