理解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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php unlink()函数使用教程
2018/07/12 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python 代码性能优化技巧分享
2012/08/07 Python
wxPython事件驱动实例详解
2014/09/28 Python
django修改models重建数据库的操作
2020/03/31 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
Shell如何接收变量输入
2012/09/24 面试题
应届生财务会计求职信
2013/11/05 职场文书
网络维护中文求职信
2014/01/03 职场文书
高一英语教学反思
2014/01/22 职场文书
技校毕业生自荐书
2014/05/23 职场文书
医院志愿者活动总结
2015/05/06 职场文书
大学生创业计划书
2019/06/24 职场文书