理解javascript定时器中的setTimeout与setInterval


Posted in Javascript onFebruary 23, 2016

一、解释说明

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> 

理解javascript定时器中的setTimeout与setInterval

理解javascript定时器中的setTimeout与setInterval

简单测试了下第五条,在我的电脑上面分别使用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>

理解javascript定时器中的setTimeout与setInterval

没有被传进去,分别用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的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件,并放到任务队列尾而不管它们是否已被处理,但一旦一个定时事件任务处理完,这些排列中的剩余定时事件就依次不间断的被执行。

理解javascript定时器中的setTimeout与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定时器中的setTimeout与setInterval

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

Javascript 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
vue写一个组件
Apr 09 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
Web开发必知Javascript技巧大全
Feb 23 #Javascript
JQUERY表单暂存功能插件分享
Feb 23 #Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 #Javascript
jQuery实现返回顶部功能
Feb 23 #Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 #Javascript
理解javascript定时器中的单线程
Feb 23 #Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
You might like
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jquery 插件开发备注
2010/08/27 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
让 python 命令行也可以自动补全
2014/11/30 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 如何实现遗传算法
2020/09/22 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
户外婚礼策划方案
2014/02/08 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
股票投资建议书
2014/05/19 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
应聘教师自荐书
2014/06/16 职场文书
忠诚教育心得体会
2014/09/03 职场文书
七一讲话心得体会
2014/09/05 职场文书
小学教师自我评价
2015/03/04 职场文书
居委会工作总结2015
2015/05/18 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server