浅谈js的防抖和节流
2019-03-15 15:58
183 查看
我们工作中遇到防抖和节流的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。
防抖
在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:
- 如果在200ms内没有再次触发滚动事件,那么就执行函数。
- 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时。
效果:如果短时间内大量触发同一事件,只会执行一次函数。
实现:既然前面都提到了计时,那实现的关键就在于 setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:
/* * fn [function] 需要防抖的函数 * delay [number] 毫秒,防抖期限值 */ function debounce(fn,delay){ let timer = null ; return function (){ if(timer){ clearTimeout(timer); } timer=setTimeout(fn,delay); } }
到这里,已经把防抖实现了,现在给出定义:
对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的delay毫秒)内,事件处理函数只执行一次。
节流
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
通俗点说就是我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。
效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
**实现 **:这里借助 setTimeout来做一个简单的实现,加上一个状态位 valid来表示当前函数是否处于工作状态:
/* * fn [function] 需要节流的函数 * delay [number] 毫秒,节流期限值 */ function throttle(fn,delay){ let valid = true; return function(){ if(!valid){ return false; } valid = false; setTimeout(function(){ fn(); valid = true; },delay) } }
运行以上代码的结果是:如果一直调用函数,那么会以1s的时间间隔,持续输出fn()。
总结:
上述内容基于防抖和节流的核心思路设计了简单的实现,文中并没有考虑上下文环境(也就是this指向),实际操作中可以考虑用apply和bind。
相关文章推荐
- JS中的防抖与节流及作用详解
- JS奇淫巧技:防抖函数与节流函数
- JS的防抖,节流,柯里化和反柯里化
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- JS节流和防抖
- [JS]防抖和节流
- js的防抖与节流处理
- [JS]防抖和节流
- js网络请求性能优化之防抖与节流
- JS事件中防抖debounce和节流throttle以及requestAnimationFrame
- js函数防抖、节流实现
- js 防抖和节流
- 学习JS防抖【节流】
- 面试准备Js复习之防抖,节流函数原理
- js函数节流和防抖
- 理解JS的节流、防抖及使用场景
- 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系
- 浅谈Node.js 访问文件系统的几种写入方式
- cocos2d-js浅谈schedule的用法
- salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇