是什么
防抖和节流两者类似【但并不一样】是用来控制某一函数在特定时间内执行次数的技术点。
什么时候重要
在给Dom绑定事件的时候显得尤为重要,因为相当于在事件函数和Dom之间加了一层控制层。
为什么重要
因为有时候我们无法控制DOM事件的触发频率,因为它是变化的。举个例子,scroll事件,当你用触控板,鼠标滚轮,或者拖动滚动条的时候,scroll事件大概每秒会触发30次,或者更多次。但是当你在移动设备上滚动屏幕时,这个事件有可能每秒触发100次 ,甚至更多。
防抖 Debounce
防抖这个技术点允许我们将多个相似的调用分成一组,或者可以理解为多个相同的事件最后只执行一次。
Raw events 原始事件有可能触发多次,Debouce 后的事件,只触发一次。假设你在一个电梯中,电梯门即将关闭,这时突然又有一个人要进来,电梯并没有上升,而是又打开了门,电梯延迟了它上升的这个动作,但是运送了更多的人,这样就相当于优化了资源。
简单实现
//防抖debounce代码:function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发,就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, 500); };}// 处理函数function handle() { console.log(Math.random());}// 滚动事件window.addEventListener('scroll', debounce(handle));
节流
节流是限制函数在某段时间内只能执行一次,或者说每隔一段时间执行一次。其跟防抖的主要区别在于 保证了函数是有规律的执行,每xx毫秒执行一次。
节流函数的实现原理是,将即将被执行的函数用定时器延时一段时间后执行。如果本次延时执行还没有完成,则忽略调用函数的请求。节流函数接受两个参数,第一个是 需要被延时执行的函数,第二个是需要延迟的时间。
var throttle = function(fn,interval){ var __self = fn,timer,firstTime=true; return function(){ var args = arguments, __me = this; // 如果是第一次执行,则无需延迟 if(firstTime){ __self.apply(__me,args); // 执行函数fn return firstTime = false; // 设置firstTime = false } if(timer){ // 如果定时器还在,说明前一次延迟执行还没有完成 return false; } timer = setTimeout(function(){ clearTimeout(timer); timer = null; __self.apply(__me,args); },interval || 500) }}window.onresize = throttle(function(){ console.log('test')},1000);
一个可以区分两者的场景
无限滚动加载
当页面滚动到底部的时候,需要取判断页面距离底部的距离去判断是否需要发送请求获取数据。这个时候用防抖(debounce)就不合适了,因为它只在停止滚动的时候触发。这个时候使用节流(throttle)就可以随时的获取页面距离底部的距离,来判断是否需要发送请求,获取更多的数据。
相关库
lodash
underscore
除了这两个之外,还有一个方法实现类似的技术点 requestAnimationFrame
以上是关于防抖,节流的知识点,欢迎关注,点赞,转发,评论。。。
关注我 一起回忆 《javaScript高级程序设计》《javaScript设计模式中》你没注意过的细节 重要的是一起成长