1、防抖节流

防抖和节流

  1. 防抖和节流严格算起来应该属于性能优化的知识

  2. 处理不当或者放任不管就容易引起浏览器卡死

从滚动条监听的例子说起

常见功能:【返回首页】

【返回首页】按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求 -- 监听浏览器滚动事件,返回当前滚条与顶部的距离

 function showTop(){
   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
   console.log('滚动条位置' + scrollTop)
 }
 window.onscroll = showTop

这个函数的默认执行频率,太高了,我们点击一次键盘的【向下方向键】,会发现函数执行8-9次!高频!!!

防抖(debounce)

基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:

  1. 如果在200ms内没有再次触发滚动事件,那么就执行函数

  2. 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时

效果: 如果短时间内大量触发同一事件,只会执行一次函数。

实现: 计时关键在于setTimeout这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:

 /**
 * fn[function]需要防抖的函数
 * delay[number]毫秒,防抖期限值
 */
 function debounce(fn,delay){
   let timer = null //借助闭包
   return function(){
     if(timer){
       clearTimeout(timer)//正在一个计时过程中,取消该计时,重新开始计时
     }
     timer = setTimeout(fn,delay)
   }
 }
 ​
 function showTop(){
   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
   console.log('滚动条位置' + scrollTop)
 }
 window.onscroll = debounce(showTop,1000) **停止滚动1秒以后,才会打印出滚动条的位置**

对于短时间内连续触发的时间(上面的滚动事件),防抖的含义就是让某个事件期限(如上面的1000毫秒)内,事件处理函数只执行一次

节流(throttle)

防抖方案处理问题的结果是:如果在限定时间段内,不断触发滚动事件(比如某个用户闲来无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。

但产品期望:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈

设计方案:类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活

效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才能生效。

实现: 这里借助setTimeout来做一个简单的实现,加上一个状态位valid来表示当前函数是否处于工作状态:

 function throttle(fn,delay){
     let valid = true
     return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间,执行函数并且在间隔期内把状态位设为无效
         valid = false
         setTimeout(() => {
             fn()
             valid = true;
         }, delay)
     }
 }
 /* 请注意,节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout,可以把状态位换成时间戳,然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在,如果存在表示还在冷却,并且在执行fn之后消除定时器表示激活,原理都一样
     */
 ​
 // 以下照旧
 function showTop  () {
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   console.log('滚动条位置:' + scrollTop);
 }
 window.onscroll = throttle(showTop,1000) 
 ​
 运行结果:如果一直拖着滚动条进行滚动,那么会以1s的时间间隔,持续输出当前位置和顶部的距离

### 防抖节流的概念 防抖(Debounce)和节流(Throttle)是在JavaScript中用来优化性能的技术,尤其是在处理高频事件时。这些技术可以防止回调函数被过于频繁地调用,从而节省计算资源并提升应用程序的响应速度[^2]。 #### 防抖 (Debounce) 当一系列连续的操作发生时,只有在最后一次操作完成后的指定时间内不再有新的操作触发时才会执行相应的逻辑。如果在这段时间内再次发生了新动作,则计时器会被重置,并重新等待下一次符合条件的时间间隔到来再做处理。这种方式适用于那些只需要关注最终状态的情况,比如: - 输入框自动补全功能,在用户停止打字一段时间后再发起请求; - 窗口大小调整结束后才更新布局或样式表; ```javascript function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); } } ``` #### 节流 (Throttle) 对于某些特定时间段内的多次触发行为只允许其中某几次生效,其余均忽略不计。通常情况下会选择首次或者每隔固定周期取样一次的方式实现这一目标。这有助于控制高频率事件的影响范围而不至于造成系统负担过重,例如: - 页面滚动过程中定期发送网络请求获取更多数据片段; - 缩放浏览器视窗尺寸期间定时刷新DOM结构以适应变化; ```javascript function throttle(fn, delay){ let flag = true; return function(){ if (!flag) return; flag = false; setTimeout(() => { fn.call(this); flag = true; }, delay); }; } ``` ### 应用场景对比 | 场景 | 使用方式 | | --- | --- | | 用户快速输入查询关键词后延迟加载提示列表 | Debounce | | 监听窗口缩放事件并在一定时间间隔内仅执行一次布局调整 | Throttle 或者 Debounce| | 处理鼠标悬停效果时减少不必要的渲染次数 | Throttle | 通过合理运用这两种方法,可以在不影响用户体验的前提下有效降低服务器压力以及客户端设备的工作量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值