防抖 节流_每日一题手写函数防抖与节流
「~函数防抖与节流 ~」
每日一题,希望让爱学习、思考的前端技术伙伴在一起学习、复盘、成长。 基础知识要夯实,原理源码要深入,深度广度要扩展,坚持每天进步一点点,每天有所收获。进大厂是最终目标 ?
* 回答面试题的套路
1、先说这个点的明确定义,或者是特性;
2、再说具体的应用场景;
3、说说自己的看法、观点;
4、可以稍微举一反三,说说同类特性,或者类似的框架,更好的方案。
防抖和节流的产生
浏览器的resize、scroll、keypress、mousemove操作时会频繁触发,如果我们在回调中计算元素位置、做一些跟DOM相关的操作,引起浏览器回流和重绘,频繁触发回调,很可能会造成浏览器掉帧,甚至会使浏览器崩溃,影响用户体验。针对这种现象,目前有两种常用的解决方案:防抖和节流。
手写函数防抖与节流
1、函数的防抖(防止老年帕金森)
对于频繁触发某个操作,我们只识别一次(只触发执行一次函数)。
代码如下:
function debounce(func, wait = 300, immediate = false) { let timer = null; return function anonymous(...params) { let now = immediate && !timer;
// 每次点击都把之前设置的定时器清除 clearTimeout(timer);
// 重新设置一个新的定时器监听wait时间内是否触发第二次 timer = setTimeout(() => { // 手动让其回归到初始状态 timer = null; // wait这么久的等待中,没有触发第二次 !immediate ? func.call(this, ...params) : null; }, wait);
// 如果是立即执行 now ? func.call(this, ...params) : null; };}
参数
1)func[function]:最后要触发执行的函数;
2)wait[number]:“频繁”设定的界限;
3)immediate[boolean]:默认多次操作,我们识别的是最后一次,但是immediate=true,让其识别第一次;
主体思路:
在当前点击完成后,我们等wait这么长的时间,看是否还会触发第二次,如果没有触发第二次,属于非频繁操作,我们直接执行想要执行的函数func;如果触发了第二次,则以前的不算了,从当前这次再开始等待...
2、函数节流:
在一段频繁操作中,可以触发多次,但是触发的频率由自己指定。
代码如下:
function throttle(func, wait = 300) { let timer = null, previous = 0; // 记录上一次操作的时间 return function anonymous(...params) { let now = new Date(), remaining = wait - (now - previous); //记录还差多久达到我们一次触发的频率 if (remaining <= 0) { // 两次操作的间隔时间已经超过wait了 window.clearTimeout(timer); timer = null; previous = now; func.call(this, ...params); } else if (!timer) { // 两次操作的间隔时间还不符合触发的频率 timer = setTimeout(() => { timer = null; previous = new Date(); func.call(this, ...params); }, remaining); } };}
参数
func[function]:最后要触发执行的函数;
wait[number]:触发的频率;
应用场景
1、防抖(debounce)
1)每次 resize/scroll 触发统计事件 (调整窗口大小);
2)文本输入的验证,连续输入文字后发送 AJAX 请求进行验证,验证一次就好。(keyup 事件);
2、节流(throttle)
1)鼠标不断点击触发;
2)监听滚动事件;
自己的认识与理解:防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
* 可以在留言区写下你的答案,一起成长进大厂。
推荐热门技术文章:
JS第一座大山:堆栈内存和闭包作用域 (想深入看这里)
JS基础进阶- 堆栈内存和闭包作用域
JS基础进阶- 闭包作用域和JS高阶编程技巧
觉得本文对你有帮助?请分享给更多人
关注「前端学苑」加星标,提升前端技能
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~
防抖 节流_每日一题手写函数防抖与节流相关推荐
- resize函数_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点 「~函数防抖与节流 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
- word饼图如何画引导线_网络授课如何手写、标注?
经过一个星期的网络授课,望兵石学校各年级主任陆续组织教师召开网络教研视频会议,会上老师们畅所欲言,谈到了自己网络教学的典型做法.遇到的困惑.改进的措施等.无论是老教师,还是青年教师,基础操作没有什么问 ...
- 和与余数的和同余理解_每日一题 | 第38期:数量关系之余数特性
从今天起"每日一题"栏目就正式更新啦~ 由福瑞和教育的主讲老师 每天给大家带来公考不同考试版块的干货资料! 旨在潜移默化中给大家培养公考解题思维,提高做题速度! 大家遇到不明白的题 ...
- yota3墨水屏设置_国产墨水屏“手写平板”评测,10.3英寸大屏,支持无纸化办公...
随着电子产品的普及,无纸化办公已经成为了一种趋势,手机和平板设备都存在的一个弊端,就是无法获得纸笔书写的体验.听朋友介绍,了解了几款支持手写的电纸书产品,想着平时办公能够写写画画,休闲的时候还可以看看 ...
- 队列的基本操作_如果让你手写个栈和队列,你还会写吗?||CSDN博客精选
来源:华为云云享专家倪升武 昨天跟一个CSDN上的朋友聊天,他说现在如果让他自己手写一个栈或者队列,估计都要写蛮久的,平时虽然都在用,但是都是别人封装好的集合. 确实,经典的数据结构,包括排序算法,虽 ...
- 深度学习数字仪表盘识别_深度学习之手写数字识别项目(Sequential方法amp;Class方法进阶版)...
此项目使用LeNet模型针对手写数字进行分类.项目中我们分别采用了顺序式API和子类方法两种方式构建了LeNet模型训练mnist数据集,并编写了给图识物应用程序用于手写数字识别. 一.LeNet模型 ...
- wpf 切换搜狗输入法英文_搜狗输入法全新升级手写功能,中英数字自由写,告别切换丨本周新闻...
搜狗AI合成主播雅妮 为您带来搜狗本周新闻播报 新 闻 原 文 .01. 2019搜狗全年营收超80亿人民币,创历史新高 近期,搜狗公布了2019年第四季度及全年未经审计的财务报告.财报显示,2019 ...
- 山体等高线怎么看_每日一题 | 此处向斜山,你看出来了吗?
每日一题 | 此处向斜山,你看出来了吗? (2018·江苏高考)如图为某区域地质简图.该区沉积地层有Q.P.C.D.S2.S1,其年代依次变老.读图回答1-2题. 1.从甲地到乙地的地形地质剖面示意图 ...
- 程序包清单签名验证失败_数字世界的手写签名
<中华人民共和国电子签名法>规定"可靠的电子签名与手写签名或者盖章具有同等的法律效力",那么如何在数字世界实现手写签名?数字世界的手写签名主要解决什么问题呢?数字世界的 ...
最新文章
- linux下的环境变量/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc文件
- c++primer书上习题date类的部分源代码(待整理)
- Qt文档阅读笔记-Threaded Fortune Server Example解析
- apache axis 1.4的invoke方法设置超时_Kubernetes 网络故障常见排查方法
- 如何防止远程程序与RDS PG连接中断
- 员工转正申请书_网站建设人员的转正的申请书
- 数学实验matlab课后习题,数学实验练习题(MATLAB)
- 多目标决策---多目标线性规划的解法
- Python 字典 get() 方法
- linux的vim替换字符串,Linux Vim替换字符串的一些方法小结
- 微信小程序中英文切换
- Lesson 17.11 案例一:SVHN街道实景门牌识别
- 木东居士谈数仓的学习方法!
- 将结构体转换为二进制
- MVC学习七:Razor布局之加载分部视图【PartialView】
- HIS 与医保系统的接入方案及实现
- 范德堡计算机科学硕士,美国范德堡大学计算机科学怎么样?
- delphi中的public和published
- AQS explanation
- java毕业设计的家居销售网站mybatis+源码+调试部署+系统+数据库+lw
热门文章
- CVPR2021满分论文 | GeoSim: Camera Simulation
- 综述|深度学习在SLAM定位与建图中的应用(近250篇参考文献)
- 摊牌了!国内首个基于结构光投影三维重建系列视频课程
- java button名字_如何实现java按钮的名字输出到文本框鄙人刚学java,题目如 爱问知识人...
- 适用matlab获取奥比深度流和视频流的方法
- 基于BERT的化学空间映射
- TF-IDF模型的概率解释
- c 将图片存入到mysql数据库中_如何将图片转换存入到数据库中,并从数据库中取出转换成图片...
- 为什么要学习 Markdown?究竟有什么用?
- iMeta期刊12名编委入选科睿唯安2021年度高被引学者