一、解释说明

1、概述

setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段

setInterval:周期性地调用一个函数(function)或者执行一段代码。

2、语法

setTimeout:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);
  1. timeoutID 是该延时操作的数字ID, 此ID随后可以用来作为window.clearTimeout方法的参数
  2. func 是你想要在delay毫秒之后执行的函数
  3. code 在第二种语法,是指你想要在delay毫秒之后执行的代码
  4. delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点
  5. 标准浏览器与IE10支持第一种语法中向延迟函数传递额外参数的功能

setInterval

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
  1. intervalID 是此重复操作的唯一辨识符,可以作为参数传给clearInterval()。
  2. func 是你想要重复调用的函数。
  3. code 是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码
  4. delay 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。
  5. 标准浏览器与IE10支持第一种语法中向延迟函数传递额外参数的功能

  

<script type="text/javascript">
    setTimeout( function(param){ alert(param)} , 100, 'ok');
</script>

简单测试了下第五条,在我的电脑上面分别使用firefox与IE9测试,前者可以顺利弹出ok,后者弹出了undefined。

二、“this”问题

由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致,这些代码中包含的 this 关键字会指向 window (全局对象)对象,这和所期望的this的值是不一样的。setInterval的情况类似。

<script type="text/javascript">
    //this指向window
    function shape(name) {
        this.name = name;
        this.timer = function(){alert('my shape is '+this.name)};
        setTimeout(this.timer, 50);
    }
    new shape('rectangle');
</script>

没有被传进去,分别用chrome,firefox和IE9实验了下,都是这个结果。

解决方法一:

<script type="text/javascript">
        function shape(name) {
        this.name = name;
        this.timer = function(){alert('my shape is '+this.name)};
        var _this = this;
        setTimeout(function() {_this.timer.call(_this)}, 50);
    }
    new shape('rectangle');
</script>

设置一个局部变量_this,然后放到setTimeout的函数变量中,timer执行call或apply,设置this值。

function能够调用局部变量_this,多亏了Javascript的闭包。里面涉及了作用域链等知识,有兴趣的可以自己去了解下,这里不展开了。

解决方法二:

这个方法有点高大上。自定义了setTimeout与setInterval。而且还扩展了低版本的IE浏览器,不支持向延迟函数传递额外参数的问题。

<script type="text/javascript">
  //自定义setTimeout与setInterval
    var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;

    window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };

    window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeSI__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };

    function shape(name) {
        this.name = name;
        this.timer = function(other){
            alert('my shape is '+this.name);
            alert('extra param is '+ other);
        };
    }
    var rectangle = new shape('rectangle');

    setTimeout.call(rectangle, rectangle.timer, 50, 'other');
</script>

1、设置局部变量,赋值为原生的setTimeout与setInterval

2、扩展setTimeout与setInterval,aArgs通过分割arguments这个变量,获取到额外的参数数组

3、用vCallback instanceof Function判断这是不是一个函数或代码,如果是函数就用apply执行

4、setTimeout用call执行,设定this对象,以及其它的func、delay等参数

5、顺便扩展setTimeout,IE低版本的浏览器也能执行额外参数

三、setTimeout与setInterval之间的一个区别

<script type="text/javascript">
  setTimeout(function(){
    /* Some long block of code... */
    setTimeout(arguments.callee, 100);
  }, 10);

  setInterval(function(){
    /* Some long block of code... */
  }, 100);
</script>

粗看上去,两个功能是差不多的,但是里面其实是不一样的。

setTimeout回调函数的执行和上一次执行之间的间隔至少有100ms(可能会更多,但不会少于100ms)

setInterval的回调函数将尝试每隔100ms执行一次,不论上次是否执行完毕,时间间隔理论上是会<=delay的。

setInterval:

<script type="text/javascript">
        function sleep(ms) {
            var start = new Date();
            while (new Date() - start <= ms) {}
        }
        var endTime = null;
        var i = 0;

        setInterval(count, 100);
        function count() {
            var elapsedTime = endTime ? (new Date() - endTime) : 100;
            i++;
            console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
            sleep(200);
            endTime = new Date();
        }
</script>

从firefox的firebug可以查看到,时间间隔很不规则。

情况大致是这样的:由于count函数的执行时间远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件,并放到任务队列尾而不管它们是否已被处理,但一旦一个定时事件任务处理完,这些排列中的剩余定时事件就依次不间断的被执行。

setTimeout:

<script type="text/javascript">
        function sleep(ms) {
            var start = new Date();
            while (new Date() - start <= ms) {}
        }
        var endTime = null;
        var i = 0;
      setTimeout(count, 100);
        function count() {
            var elapsedTime = endTime ? (new Date() - endTime) : 100;
            i++;
            console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
            sleep(200);
            endTime = new Date();
            setTimeout(count, 100);
        }
</script>    

demo下载:

http://download.csdn.net/download/loneleaf1/7961057

参考资料:

http://ejohn.org/blog/how-javascript-timers-work/  How JavaScript Timers Work

https://developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout window.setTimeout

https://developer.mozilla.org/zh-CN/docs/Web/API/Window.setInterval Window.setInterval

http://heroicyang.com/2012/09/06/javascript-timers/ 理解JavaScript定时器:setTimeout和setInterval

Javascript定时器(二)——setTimeout与setInterval的更多相关文章

  1. JavaScript定时器:setTimeout()和setInterval()

    1 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1 要执行的代码或函数 2 毫秒(在 ...

  2. javascript 函数返回值(return)、定时器(setTimeout、setInterval)

    一.函数的返回值:return 1.函数名+括号=return后面的值 <script> function fn1(){ return 100; } alert(fn1()); // 10 ...

  3. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  4. JavaScript定时机制setTimeout与setInterval研究

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  5. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  6. js定时器window.setTimeout和setInterval

    window.setTimeout(function(){                            document.getElementById("editorindex&q ...

  7. JavaScript中的setTimeout和setInterval

    上一篇博文<浏览器中Javascript单线程分析>中描述了浏览器中Javascript单线程的原理. 在此基础上,这篇文章将主要介绍setTimeout/setInterval是如何模拟 ...

  8. js中两种定时器,setTimeout和setInterval的区别

    setTimeout只在指定时间后执行一次,代码如下:   <script>   //定时器 异步运行   function hello(){   alert("hello&qu ...

  9. JavaScript中的setTimeout、setInterval和随机函数制作简易抽奖小程序

    几乎所有计算机语言有都内置随机函数.当然这种随机,人们习惯称为伪随机数发生器,产生的是一个[0,1)之间的一个小数.再通过简单算术运算生成一个符合需求的整数.JS中通用公式通常为parseInt(Ma ...

随机推荐

  1. 在C#代码中应用Log4Net系列教程(附源代码)

    Log4Net应该可以说是DotNet中最流行的开源日志组件了.以前需要苦逼写的日志类,在Log4Net中简单地配置一下就搞定了.没用过Log4Net,真心不知道原来日志组件也可以做得这么灵活,当然这 ...

  2. HTML标签界里不会再用到的标签属性(一)

    为了成为一名初级前端开发工程师,最近正在探寻HTML标签的众多奥秘,果不其然,让我发现了许多被“冷落”了的标签属性. 一.<!DOCTYPE> 自从HTML5流行之后,<!DOCTY ...

  3. bin/bash 和 /bin/sh 的区别

    今天在用ssh Secure shell 连接虚拟机中的Ubuntu编写程序时,想比对一下两个源代码有什么差别,但是在一个ssh 客户端下不断的切换很是费劲.于是想着在主机中再添加一个用户.我原本用s ...

  4. 创建对象_工厂方法(Factory Method)模式 与 静态工厂方法

      工厂方法模式:   定义:为创建对象定义一个接口,让子类决定实例化哪个类.工厂方法让一个类的实例化延迟至子类.   应用场景: 客户类不关心使用哪个具体类,只关心该接口所提供的功能: 创建过程比较 ...

  5. [转]NHibernate之旅(11):探索多对多关系及其关联查询

    本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...

  6. Java核心卷笔记(一)

    第三章Java基程序设计结构 1.注释 三种注释方式: // 注释单行 /* 内容 */ 注释单行 /** * 内容 */ 2. java 数据类型 Java数据类型可分为两种:基本数据类型和引用数据 ...

  7. 时间复杂度O()与KMP算法

    要得到某个结果,可以有很多种方式,算法就是为了寻找一条最快的方式. 而评判其好坏的标准就是时间复杂度. O(1): 我们把执行一次的时间复杂度定义为O(1) sum = a +b; cout < ...

  8. PATH_SEPARATOR

    PATH_SEPARATOR是一个常量,在Linux系统中是一个" : "号,Windows上是一个";"号.所以编写程序时最好用常量 PATH_SEPARAT ...

  9. SpringBoot日记——分布式篇

    思考:什么是分布式?什么是微服务? 一些概念:RPC-远程过程调用,某台机器想要调用另一台机器所需要的一种服务,及分布式的服务框架,比如dubbo或者SpringCloud. 铺天盖地的分布式互联网系 ...

  10. python 爬虫newspaper3k 新闻爬去方法 利用第三方库

    from newspaper import Article url = '你想要爬取的网站url' news = Article(url, language='zh') news .download( ...