理解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 相关文章推荐
js传值 判断
Oct 26 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
详解jquery和vue对比
Apr 16 jQuery
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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
mysql 性能的检查和优化方法
2009/06/21 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php 中英文语言转换类代码
2011/08/11 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
js实现购物车功能
2018/06/12 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python实现移动木板小游戏
2020/10/09 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
英文导游欢迎词
2014/01/11 职场文书
一体化教学实施方案
2014/05/10 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python