理解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定时器有所帮助。
相关文章
在一些浏览器里已经可以使用web api调用摄像头功能了,下面这篇文章主要给大家介绍了关于如何利用js给自己照相并修图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Html IFrame的用法及注意点,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
今天小编就为大家分享一篇layui输入框只允许输入中文且判断长度的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了javascript高级定时器，针对javascript的代码队列进行详细解析，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了js+css实现红包雨效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
本文给大家分享使用for循环实现js生成简单的等差数列，具体实现方法，大家参考下本文2017-11-11
es6中的import导入模块 和 export导出模块详解
require 是 CommonJS 模块系统中用于导入模块的关键字,采用同步加载方式；而 import 和 export 是 ES6 模块系统中用于导入和导出模块的关键字,采用静态加载方式,并且支持异步加载,这篇文章主要介绍了es6中的import导入模块 和 export导出模块,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了JavaScript canvas实现七彩太阳光晕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了javascript通过回车实现tab切换功能,需要的朋友可以参考下2014-03-03
Bootstrap datepicker日期选择器插件使用详解
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论