手写setTimeout和setInterval

setTimeout

写代码之前需要知道setTimeout实现原理：本质上就是在给定的时间向任务队列添加回调函数，并执行。

function mySetTimeout(...rest){// 1.得到调用mySetTimeout函数时的时间戳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本身执行是同步的，执行的回调函数是异步的11111111  # 输出8次1

结论:

setTimeout:

1.得到调用mySetTimeout函数时的时间戳；

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

3.监听事件变化，当事件到达指定的结束时间时，结束回调函数。

setIterval:

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

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

注意：

setTimeout和setIterval本身执行是同步的，执行的回调函数是异步的。

这里是一个基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
欢迎访问!

手写setTimeout和setInterval相关推荐

vue定时器的写法和setTimeout和setInterval的区别
0.前言介绍 setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval ...
Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）
背景使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大 ...
promise 浏览器实现的源码_【大前端01-01】函数式编程与JS异步编程、手写Promise...
[简答题]一.谈谈你是如何理解JS异步编程的,EventLoop.消息队列都是做什么的,什么是宏任务.什么是微任务? 如何理解JS异步编程众所周知JavaScript语言执行环境是"单线程 ...
史上最全！56个JavaScript的「手写」知识点，扫盲啦！
关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群今天就带着大家来复习一下JavaScript的56个「手写」知识点哦~~~ 大厂手写题 1.实现原生 AJAX 封装 const a ...
javascript算法+手写js面试题
链表 function ListNode(val, next) {this.val = (val===undefined ? 0 : val)this.next = (next===undefined ...
前端面试高频手写题目
高频手写题目面试高频手写题目 1 实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时手写简化版: // func是用户传入需要防抖的函 ...
手写一个promise用法_手写一个 Promise
1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 ...
前端面试题之手写代码篇
原文地址:前端面试题之手写代码篇 git地址:https://gitee.com/AiShiYuShiJiePingXing/lovebetterworld 点击前往GIT 一.JavaScript ...
前端面试手写题汇总大全（含答案）-- 持续更新
高频一. 柯里化函数(Currying)和反柯里化简介柯里化(Currying),又称部分求值(Partial Evaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第 ...

手写setTimeout和setInterval

手写setTimeout和setInterval

setTimeout

setInterval

结论:

注意：

手写setTimeout和setInterval相关推荐

最新文章

热门文章