您好,欢迎访问一九零五行业门户网

理解javascript定时器中的setTimeout与setInterval_javascript技巧

一、解释说明
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支持第一种语法中向延迟函数传递额外参数的功能
简单测试了下第五条,在我的电脑上面分别使用firefox与ie9测试,前者可以顺利弹出ok,后者弹出了undefined。
二、“this”问题
由settimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致,这些代码中包含的 this 关键字会指向 window (全局对象)对象,这和所期望的this的值是不一样的。setinterval的情况类似。

没有被传进去,分别用chrome,firefox和ie9实验了下,都是这个结果。
解决方法一:

设置一个局部变量_this,然后放到settimeout的函数变量中,timer执行call或apply,设置this值。
function能够调用局部变量_this,多亏了javascript的闭包。里面涉及了作用域链等知识,有兴趣的可以自己去了解下,这里不展开了。
解决方法二:
这个方法有点高大上。自定义了settimeout与setinterval。而且还扩展了低版本的ie浏览器,不支持向延迟函数传递额外参数的问题。

1、设置局部变量,赋值为原生的settimeout与setinterval
2、扩展settimeout与setinterval,aargs通过分割arguments这个变量,获取到额外的参数数组
3、用vcallback instanceof function判断这是不是一个函数或代码,如果是函数就用apply执行
4、settimeout用call执行,设定this对象,以及其它的func、delay等参数
5、顺便扩展settimeout,ie低版本的浏览器也能执行额外参数
三、settimeout与setinterval之间的一个区别

看上去,两个功能是差不多的,但是里面其实是不一样的。
settimeout回调函数的执行和上一次执行之间的间隔至少有100ms(可能会更多,但不会少于100ms)
setinterval的回调函数将尝试每隔100ms执行一次,不论上次是否执行完毕,时间间隔理论上是会<=delay的。
setinterval:

从firefox的firebug可以查看到,时间间隔很不规则。
情况大致是这样的:由于count函数的执行时间远大于setinterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件,并放到任务队列尾而不管它们是否已被处理,但一旦一个定时事件任务处理完,这些排列中的剩余定时事件就依次不间断的被执行。
settimeout:

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

推荐信息