理解javascript定时器中的setTimeout与setInterval

更新时间：2016年02月23日 14:30:34 作者：咖啡机（K.F.J）

这篇文章主要帮助大家学习理解javascript定时器中的setTimeout与setInterval，从实例出发进行深入探讨，感兴趣的小伙伴们可以参考一下

一、解释说明

1、概述

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

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

2、语法

setTimeout：

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

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

setInterval

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()。
func 是你想要重复调用的函数。
code 是另一种语法的应用，是指你想要重复执行的一段字符串构成的代码
delay 是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和setTimeout一样，实际的延迟时间可能会稍长一点。
标准浏览器与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>

以上就是本文的全部内容，希望对大家学习javascript定时器有所帮助。

您可能感兴趣的文章:

js下通过prototype扩展实现indexOf的代码
这里使用js prototype扩展实现的indexOf的实现代码，跟js自带的方法，差不多。
2010-12-12
快速实现JS图片懒加载(可视区域加载)示例代码
目前很多网站，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法，一起来看看吧。
2017-01-01
js同时按下两个方向键
本文通过实例代码给大家介绍了js同时按下两个方向键的实现方法，感兴趣的朋友跟随脚本之家小编一起看看吧
2007-12-12
Express无法通过req.body获取请求传递的数据解决方法
这篇文章主要为大家介绍了Express无法通过req.body获取请求传递的数据解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
JS将秒换成时分秒实现代码
将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助
2013-09-09
使用Electron自制录屏软件
录屏软件对于我们来说都不陌生了,本文我们要做的事情是实现自己的录屏软件,载体使用Electron,因为它更适合录制桌面的场景,下面我们就来看看具体实现方法吧
2024-01-01
JS实现类似百叶窗下拉菜单效果
百叶窗下拉菜单效果非常棒，今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果，需要的朋友参考下
2016-12-12
javascript使用activex控件的代码
最近公司项目用到了avtivex控件。以前从来没有用过。我把最近到处找到的使用方法整理一下。
2011-01-01
js版扫雷实现代码原理不错
前一段时间在图书馆看了本关于JavaScript的书，上面讲怎样用js编推箱子小游戏。我想，那扫雷也当然能编出来，然后就用DW试了试，结果如下。
2009-11-11
JavaScript数组和对象的复制
本篇文章主要介绍了JavaScript数组和对象的复制的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03