自写函数的防抖和节流
函数的防抖和节流是个啥，在知乎上看到一篇非常形象的文章，这里挂上链接
https://zhuanlan.zhihu.com/p/72923073（好！！！）
防抖
为了说明问题，假设一个场景：鼠标滑过一个div，触发onmousemove事件，它内部的文字会显示当前鼠标的坐标。每当我们的鼠标移动，都会触发事件，展示新的坐标。
抖的意思其实就是‘执行’，而我们为了防止函数过于频繁的执行，给与它一定的冷静期，当我们停止移动一段时间后再去执行这个函数，这个时候我们就需要用到函数的防抖了。ok，现在我们明确两个特点
1.持续触发不执行
2.不触发的一段时间之后再去执行
其实第二点我们很容易做到，用setTimeout就可以实现延迟执行。
这里注意一点，需要用apply来使指针指向调用者(在这里也就是我们的box)，否则将指向window，要知道，setTimeout是window的方法。
ok现在回来去思考第一点，如何当它持续触发的时候不执行，现在我们是有setTimeout给予了它冷静期，所以是setTimeout控制了函数的执行。那么我们的思路就非常明确了，在它持续触发的时间内，清除掉定时器就ok了。
这里要多说一句，我们实际去调用debounce的时候，执行的是匿名函数内的内容。你可以把debounce当做一个对象，而我们声明的timeout就是它的一个属性 ，而我们使用的也只是它的内部的函数。
这样，一个防抖就做好了。
节流
节流的意思其实和防抖比较的类似，一听名字就知道也是为了防止函数毫无节制的频繁的执行，但是他要保证的是函数在一段时间内只能执行一次。ok，确定两个特征：1.持续触发不会执行多次2.到一定时间再去执行
简单来说，我们希望函数在一定时间内只能执行一次，所以我们需要有一个开关去控制。
1.首先在我们创造的时候，默认规定run = true，表示开关开着，只有等于true的时候（也就意味着，这一段时间，还未执行过），如果还未执行过，那么我们就认为其可执行，否则，也就是当run为false的时候(意味着在dealy的时间内，已经有过一次函数的执行了)，
2.所以，在匿名函数中，我们首先就判断run是不是false，如果是false，就直接return掉。当为true的时候，我们就直接给其赋值为false，表示这一次的执行。接下来就是setTimeout了，我们延迟delay的时间去执行函数，以及重新给run赋值为true,注意，是延迟过后才去执行，所以在delay的时间内，run仍为false，接下来的任何触发都是直接被return掉的。
3.这也就防止了函数的频繁执行，也保证了一段时间内只执行一次。
总结
防抖和节流的代码，还是有一点点的小困难去理解，讲的不好，请多海涵！！！
自写函数的防抖和节流相关推荐
- timertask run函数未执行_函数的防抖和节流是个啥？？？
内容来源:SegmentFault社区 作者:nero 整理编辑:SegmentFault 曾经面试时候被问到过这个,年少的我一脸无知... 后来工作中遇到了一个场景:输入名称的同时去服务器校验名称是 ...
- php如何做防抖,别抖，OK? 操作系统抖动现象、网络抖动与延迟、函数抖动之防抖与节流，串讲...
偶然看到一个前端小伙伴写了篇"防抖与节流",我就想啊,咱后端不也有些喜欢抖来抖去的嘛,我就总结一下吧. 想到几个写几个啊,如果还想看别的抖,可以在评论区留言哦,虽然评论不少,但是我 ...
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- 防抖 节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点 「~函数防抖与节流 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
- resize函数_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点 「~函数防抖与节流 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
- 当面试官让你手写防抖、节流时，是在考察什么
防抖.节流,都是用于节省函数调用次数的方案,达到优化程序.提升性能甚至是避免bug的目的.作为一个经典的主题,也是面试常考项,部分面试官会让你手写,这时, 他是在考察什么?你能轻易地写出比较好的防抖. ...
- 虾扯蛋之函数防抖和节流
背景 今天在coding的时候,做了一个搜索框,也正是这个搜索框,让我和后台小伙伴直接由铁磁变为塑料兄弟.那到底发生啥了呢?其实很简单,其实很无奈,就是我用王者的手速把他的接口访问崩了! ...
- JavaScript小知识点（二）：函数防抖和节流
函数防抖 函数防抖就是让某个函数满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算.例如监听滚动无限加载时,如果没有对请求函数进行防抖控制,用户拉到底部 ...
- 防抖与节流方案_函数防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize.scroll.mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数. 通常这种情况下我 ...
最新文章
- Antd-Design List渲染列中Button 点击事件 传递参数
- ajax请求成功后location.href没有跳转
- 最大似然函数对数求解的便利
- 机器学习（三）：支持向量机SVM（含代码和注释）
- POJ1185 炮兵阵地 状压DP
- Allegro padstack
- JupyterHub on Kubernetes-Helm安装
- Python 对文件进行编码转换
- Tomcat5的数据库连接池配置
- 7.这就是搜索引擎:核心技术详解 --- 云存储与云计算
- 2016大学里的流年回忆
- 基于node.js和Vue的音乐管理系统 /音乐网站的设计与实现
- js中的new Option默认选中
- 荣耀8微信总是无法连接服务器,微信无法登陆想要登陆的王者荣耀账号，怎么办？...
- iOS 应用Archiving问题
- tkinter + wxpy 实现微信发送信息 接收消息 并保存聊天记录的功能（GUI）
- Xcode8使用出现bundleid: com.xxx.xxx, enable_level: 0, persist_level: 0, propagate_with_acti
- 异或鉴相器 matlab 数字鉴相器,一款采用CPLD的光伏并网逆变器锁相及保护电路设计...
- Solana中的跨合约调用 及 Program Derived Addresses
- 计算机c盘那个是系统文件夹,C盘有哪些文件可以删除？可以手动删除的几个C盘中的文件夹...