理解javascript定时器中的setTimeout与setInterval

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之间的一个区别

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgypzg.html