? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
注意区分执行时间和间隔时间
执行时间:定/延时器代码执行的时间
间隔时间:定/延时器设置每隔 xxxms 执行
一、延时器(setTimeout)
1.延时器(setTimeout)的工作方式是:当设定一个延时器是5s后进行时,并不代表它5s后就立即执行,只是代表它5s后会被加入队列,如果5s后,队列没有其他东西,那么延时器的代码会立即执行,否则会延迟执行。
因此,关于延时器最重要的一点是:指定的时间间隔(如设置5s后执行),表示何时将延时器加入到队列,而不是何时真正执行代码。
//经测试,下面这段不起作用,可能是被废弃了。
2.Firefox中的延时器的实现还能让开发者确定延时器过了多久才执行,需要传递一个实际执行的时间(actualTime)与执行时间的间隔(specifiedTime)(如设置5s后执行)的差值(diff=actualTime-specifiedTime)
d
ocument.querySelector('#btn1').onclick=function () {
console.time()
setTimeout(function (diff) {
if(diff>0){
//晚调用,因为actualTime大于specifiedTime
console.log('时间差为'+diff)
}else if(diff>0){
//早调用,因为actualTime小于specifiedTime
console.log('时间差为'+diff)
}else{
console.log('时间差为'+diff)
}
},1000)
console.timeEnd()
}
二、定时器(setInterval)
1.定时器的一大特点是每隔一段时间(如每隔2s)就会执行,一直重复。这样有个问题:设定一个定时器a每隔2s执行一次,如果a执行的时间(executiveTime)大于时间间隔(2s),那么,第一次执行的a还没执行完第一次,就开始执行第二次了。
js巧妙地避免了这个问题——即等到定时器的代码执行完后,再去将定时器的代码加入到队列中,所以定时器代码加入队列的最小时间间隔即指定间隔(因为理想状态是是定时器的执行时间在时间间隔内完成)。
2.使用setInterval的问题
(1)某些间隔会被跳过——如设置每个1s执行一次,如果该定时器代码执行时间大于1s,或者正好等于1s,那么,相当于代码执行时间正好等于间隔时间,那么,这个间隔时间就被执行时间占据了,所以就没有了间隔时间即没有间隔。
image.png
(2)多个定时器代码执行之间的间隔可能会比预期小
因为代码执行时间会长一点(因为队列并不总是空闲的,所以要排队等待执行),导致时间间隔变小。
解决:使用递归调用延时器,代替定时器
setTimeout(function () {
//执行代码
//xxxx
//xxxx
setTimeout(arguments.callee,1000)
},1000)
arguments.callee的作用是获取当前执行函数的引用,并设置新的相同的延时器再来一次,即递归调用?。
好处不再赘述了,即解决了上面的两个问题
实际遇到的问题.当js中的for循环遇到延时器或者定时器时需要注意的问题
https://blog.youkuaiyun.com/wxl1555/article/details/53719659
一定要保存 i !!!
链接:详情