js-定时器

setTimeout和setInterval的回调函数，都是经过n毫秒后被添加到队列中，而不是过n毫秒后立即执行。

setInterval

• 执行时机：每隔一段时间就会执行一次

• 语法：

  • const _time=setInterval(function(){
      // 执行代码
    },时间)
    ​
    // 结束定时器
    crealInterval(_time)
    ​
    //注：时间的单位是ms,若是1S在这要写1000

• setInterval执行原理

  • 定时器设置的时间是什么时候将代码加入到事件队列中,而不是什么时候执行此代码，也就是说真正执行代码的时间是不确定的；

  • eg:setInterval(function(){}，n)

    • 等待n ms将function事件推到事件队列中

    • [1]当n ms过去 我们将T1定时器添加到事件队列中，但是此时主线程还有正在执行的任务，所以会等待任务执行完毕再执行T1；

    • [2]主线程执行T1，此时已经又过了n ms ,将T2添加到事件队列中；

    • [3]当又过了n ms，此时T2还没有被执行，此时任务队列中有定时器实例，所以T3不会被添加，而是被跳过

• setInterval缺点

  • [1]使用setInterval时，某些间隔会被跳过

  • [2]可能多个定时器会连续执行

setTimeout

• 执行时机：延迟一段时间执行一次代码，只执行一次

• 语法

  • let _time=setTimeout(function(){},时间)
    ​
    //清除
    clearTimeout(_time)

• 执行原理

  • 每个setTimeout产生的任务会等待相应的时间直接push到任务队列中(不会看任务队列中是否存在其他的setTimeout事件)

• 代码

  • for (var i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
    // 打印结果是什么 同时打印5个5
    // 原因：执行原理：等待所有的同步执行完毕1000ms加入事件队列中，所以同时加入事件队列池

使用setTimeout模拟setInterval

 function time () {
        console.log(111)
        setTimeout(time, 1000)
      }
      setTimeout(time, 1000)
​
// 优点---上述函数每次执行的时候都会创建一个新的定时器
// 在前一个定时器执行完前，不会向队列插入新的定时器（不存在漏掉的可能）
// 保证定时器间隔