手写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 # 输出8次1
定论:
setTimeout:
1.得到调用setTimeoutMy函数时的时间戳;
2.得到回调函数结束的时间;
3.监听工作改动,当工作抵达指定的结束时间时,结束回调函数。
setIterval:
1:运用setTimeout在mySetInterval被调用时异步调用一次;
2:运用setTimeout在给定的时间,就调用回调函数的原理,运用递归思维,自己调用自己。
留心:
setTimeout和setIterval本身实行是同步的,实行的回调函数是异步的。