JS红皮书解读之延时器和定时器

0

注意区分执行时间和间隔时间
执行时间：定/延时器代码执行的时间
间隔时间：定/延时器设置每隔 xxxms 执行

一、延时器(setTimeout)
1.延时器(setTimeout)的工作方式是：当设定一个延时器是5s后进行时，并不代表它5s后就立即执行，只是代表它5s后会被加入队列，如果5s后，队列没有其他东西，那么延时器的代码会立即执行，否则会延迟执行。

因此，关于延时器最重要的一点是：指定的时间间隔（如设置5s后执行），表示何时将延时器加入到队列，而不是何时真正执行代码。

//经测试，下面这段不起作用，可能是被废弃了。
2.Firefox中的延时器的实现还能让开发者确定延时器过了多久才执行，需要传递一个实际执行的时间（actualTime）与执行时间的间隔（specifiedTime）（如设置5s后执行）的差值(diff=actualTime-specifiedTime)

 document.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.csdn.net/wxl1555/article/details/53719659
一定要保存 i !!!

（完）