JS防抖和节流原理??
防抖和节流已经是老生常谈的知识点了,也是很多场景会用到的,写这篇博客纯粹发表自己的了解并做一个记录。??
1. 什么是防抖 ??
不能从字面意思来看待防抖。我第一次接触到这个概念时,还以为JS函数有抖动。-汗表情 其实是为了防止一个函数在段时间内疯狂执行。最经常出现的场景如下 栗子表情
- 搜索框 input事件 ??
- 视窗大小变化 resize事件
- 鼠标移动 mousemove事件 ???
- 等等。。
先从原理出发。我对防抖的了解:不希望某个事件在短时间内疯狂触发,影响性能,所以我们设置一个定时器,让这个事件在肯定时间推迟后再执行,假如这个推迟中间中途这个事件又触发了,那就把上次事件绑定的定时器取消,避免了上次事件执行,而后重新设置一个定时器绑定在当前事件上。
由原理可知,我们需要一个变量指向定时器,而且这个变量应该是‘全局变量’,可以用闭包实现这个‘全局变量’。这里的‘全局变量’打了引号,由于它不是我们常说的全局变量,而是在闭包中的变量,它相对于闭包来说是全局变量。
比方我们改变视窗大小的时候,我们更希望在视窗大小固定的时候再去执行某个方法。
原理转换为代码
function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function() { if(timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}
- 以视窗大小改变来举例, 假如没有设置防抖
function resize() { console.log('视窗改变时需要执行些什么...')}window.addEventListener('resize',resize)
没有防抖
- 假如加了防抖
function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}function resize() { console.log('视窗改变时需要执行些什么...')}window.addEventListener('resize', debounce(resize, 1000))
设置了防抖
比照非常显著,防抖在某些场景下,对性能优化非常大。假如是请求后台接口,防抖也可以减小服务器的压力。
2.什么是节流
相比防抖,节流的概念更浅显,节约流量。假如一个方法在短时间内疯狂执行,我们希望它每隔一段时间执行。节约一点流量嘛 嘻嘻
原理转换为代码
function throttle(fn, delay = 800) { var timer = 0 var _delay = delay return function(){ if(!timer) { setTimeout(() => { fn() timer = 0 }, _delay); } }}
- 以视窗大小改变举例
function resize(n) { return function () { console.log('视窗改变时需要执行些什么...' + n++) }}window.addEventListener('resize', throttle(resize(1)))
节流
·
- 节流的应用场景:
- 懒加载时请求数据
总结
防抖和节流还是看业务需求, 需求合适的话请尽情用 ??
站在巨人的肩膀上,能看得更远。路漫漫其修远兮,吾将上下而求索。共勉
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS防抖和节流原理??
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS防抖和节流原理??