resize函数_每日一题手写函数防抖与节流
「~函数防抖与节流 ~」
每日一题,希望让爱学习、思考的前端技术伙伴在一起学习、复盘、成长。 基础知识要夯实,原理源码要深入,深度广度要扩展,坚持每天进步一点点,每天有所收获。进大厂是最终目标 ?
* 回答面试题的套路
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函数_每日一题手写函数防抖与节流相关推荐
- 防抖 节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点 「~函数防抖与节流 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
- swap函数_[C++基础入门] 6、函数
点击上方 蓝字 关注我呀! [C++基础入门] 6.函数 文章目录 6 函数 6.1 概述 6.2 函数的定义 6.3 函数的调用 6.4 值传递 6.5 函数的常见样式 6.6 函数的声明 6.7 ...
- 数据库创建函数_达梦数据库创建UUID函数
数据库创建函数_达梦数据库创建UUID函数 接触达梦数据库有一段时间了,整理了一些资料,今天分享一下达梦数据UUID自定义函数 UUID函数定义 很多数据库都有提供UUID函数,可是接触达梦数据库后, ...
- 深度学习数字仪表盘识别_深度学习之手写数字识别项目(Sequential方法amp;Class方法进阶版)...
此项目使用LeNet模型针对手写数字进行分类.项目中我们分别采用了顺序式API和子类方法两种方式构建了LeNet模型训练mnist数据集,并编写了给图识物应用程序用于手写数字识别. 一.LeNet模型 ...
- python手写汉字识别_用python实现手写数字识别
前言 在之前的学习中,已经对神经网络的算法具体进行了学习和了解.现在,我们可以用python通过两种方法来实现手写数字的识别.这两种方法分别是多元逻辑回归和神经网络方法. 用多元逻辑回归手写数字识别 ...
- python朴素贝叶斯的文本分类_自给自足,完全手写一个朴素贝叶斯分类器,完成文本分类...
Part 1: 本文解决的问题: 我在有这样的一个数据集,里面存放了人们对近期播放电影的评价,当然评价也就分成两部分,好评和差评.我们想利用这些数据训练一个模型,然后可以自动的对影评做出判断,到底是好 ...
- python不允许使用关键字作为变量名、允许使用内置函数_【判断题】Python不允许使用关键字作为变量名,但是允许使用内置函数名作为变量名,不过这会改变函数名的含义,所以不建议这样做...
[判断题]Python不允许使用关键字作为变量名,但是允许使用内置函数名作为变量名,不过这会改变函数名的含义,所以不建议这样做 更多相关问题 [单选,A2型题,A1/A2型题] <十四经发挥&g ...
- word饼图如何画引导线_网络授课如何手写、标注?
经过一个星期的网络授课,望兵石学校各年级主任陆续组织教师召开网络教研视频会议,会上老师们畅所欲言,谈到了自己网络教学的典型做法.遇到的困惑.改进的措施等.无论是老教师,还是青年教师,基础操作没有什么问 ...
- 和与余数的和同余理解_每日一题 | 第38期:数量关系之余数特性
从今天起"每日一题"栏目就正式更新啦~ 由福瑞和教育的主讲老师 每天给大家带来公考不同考试版块的干货资料! 旨在潜移默化中给大家培养公考解题思维,提高做题速度! 大家遇到不明白的题 ...
最新文章
- java字符存储,在什么编码是Java字符存储在?
- 前端三十三:表单form
- MYSQL:如何正确高效的使用 MySQL 索引?
- ux的重要性_颜色在UX中的重要性
- tensorflow实现反卷积
- 如何把数据库从sql变成mysql_如何将数据库从SQL Server迁移到MySQL
- Linux下获取CPUID、硬盘序列号与MAC地址
- C/C++#if #ifdef #ifndef的区别
- python 反爬策略_如何应对网站反爬虫策略?如何高效地爬大量数据?
- Scala学习笔记(二)表达式和函数
- python线程监控_Python 使用摄像头监测心率!这么强吗?
- Solr Facet 统计查询
- Kubernetes(k8s)快速入门和环境部署
- 【Tushare转存SQL】可转债数据(待续)
- cadaver (davtest)
- pb11.5调用系统打印机 Function ulong ShellExecute(ulong hwnd,ref string lpOperation,ref string lpFile,ref st
- sql 日期时间格式转换
- 一个离开CV界多年的油腻中年男子的CV复兴之路
- Python【Feature】高级特性
- 卸载未完全安装的Microsoft SQL Server 2008 R2