手写setTimeout和setInterval


setTimeout

写代码之前需求知道setTimeout完结原理:本质上就是在给定的时间向使命队伍增加回调函数,并实行。

function mySetTimeout(...rest){
      // 1.得到调用setTimeoutMy函数时的时间戳
      let start =new Date().getTime();
      // 2.得到回调函数结束的时间
      let end = start+ rest[1];
      // 3. 监听工作改动,当工作抵达指定的结束时间时,结束回调函数
      let timer =setInterval(()=>{
          let time =new Date().getTime();
          if(time>=end){
             clearInterval(timer);
             rest[0](rest[2]);
          }
      },17)
      console.log('同步实行----');
}
mySetTimeout((res)=>{
     console.log(res);
},1000,'实行效果')
------------
效果:
  同步实行---- # 从这儿可以看出setTimeout本身实行是同步的,实行的回调函数是异步的
  实行效果  # 输出效果,是在1秒之后输出

setInterval

写代码之前需求知道setInterval完结原理:本质上就是每隔必定的时间向使命队伍增加回调函数

function mySetInterval(...rest) {
    /**
     * rest数组承受三个参数:
     *  1)回调函数               rest[0]
     *  2)实行回调函数所需的时间  rest[1]
     *  3)操作元素               rest[2]  
    */
    function interval() {
        if (rest[2] > 0) {
            // 2:运用setTimeout在给定的时间,就调用回调函数的原理,运用递归思维,自己调用自己.
            setTimeout(interval, rest[1])
            rest[0]();
            rest[2]--;
        }else{
            // 3:条件不符合,退出函数
            return
        }
    }
    // 1:运用setTimeout在mySetInterval被调用时异步调用一次。
    setTimeout(interval, rest[1]);
    console.log('同步实行----');
}
mySetInterval(() => {
    console.log(1)
}, 1000, 8)
-----------
效果:
	同步实行----  # 从这儿可以看出setIterval本身实行是同步的,实行的回调函数是异步的
	1
	1
	1
	1
	1
	1
	1
	1  # 输出81

定论:

setTimeout:

1.得到调用setTimeoutMy函数时的时间戳;

2.得到回调函数结束的时间;

3.监听工作改动,当工作抵达指定的结束时间时,结束回调函数。

setIterval:

1:运用setTimeout在mySetInterval被调用时异步调用一次;

2:运用setTimeout在给定的时间,就调用回调函数的原理,运用递归思维,自己调用自己。

留心:

setTimeoutsetIterval本身实行是同步的,实行的回调函数是异步的。