《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. combobox 的onLoadSuccess执行两次解决办法和 取值赋值

    加红色字部分 jsp <input class="easyui-combobox" id="keshi" name="keshi" v ...

  2. Python实现十大经典排序算法（史上最简单）

    十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...

  3. 抽象工厂模式（Abstract Factory）（抽象化）

    不管是简单工厂模式还是工厂方法模式,在整个模式中只能有一个抽象产品,但在现实生活中,一个工厂只创建单个产品的例子很少,因为现在的工厂都是多元化发展. (1)产品等级结构:即产品的继承结构,如一个抽象类 ...

  4. springmvc：配置解决中文乱码的过滤器

    在web.xml中配置以下内容: <!--配置解决中文乱码过滤器--> <filter> <filter-name>characterEncodingFilter& ...

  5. TZOJ 5962 Happy Matt Friends(计数DP)

    描述 Matt hzs N friends. They are playing a game together. Each of Matt’s friends has a magic number. ...

  6. Leetcode103. Binary Tree Zigzag Level Order Traversal二叉树的锯齿形层次遍历

    给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7], 3 / ...

  7. Leetcode532.K-diff Pairs in an Array数组中的K-diff数对

    给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数组中的数字,且两数之差的绝对值是 k ...

  8. angular7.X配置同时使用localhost和本机IP访问项目

    1.项目中找到此文件“node_modules/webpack-dev-server/lib/Server.js”,按照下图修改: 二.修改配置文件package.json,见下图: 三.npm st ...

  9. TZ_11_Spring-Boot的入门

    1.SpringBoot的特点 为基于Spring的开发提供更快的入门体验 开箱即用,没有代码生成,也无需XML配置.同时也可以修改默认值来满足特定的需求 提供了一些大型项目中常见的非功能性特性,如嵌 ...

  10. MAC+iTerm定制目录显示颜色和提示符

    知道该如何定制ls时各种类型文件(unix下所有的都是file..)的颜色了. 很简单,就是在.bash_profile下加了三行. export CLICOLOR=1 export LSCOLORS ...