函数的节流与防抖

Posted 2021-06-13 ZZZ --- jh

函数的节流与防抖

前言

事件的触发权很多时候都属于用户，有些情况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力
• 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题

如果你碰到这些问题，那就需要用到函数节流和防抖了.

---

函数的节流(throttle)

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次.

有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效.

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  return
}
canRun = false
setTimeout( function () {
    console.log("函数节流")
    canRun = true
  }, 500)
}

应用场景:

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交
• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

---

函数防抖(debounce)

防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效.

function fun(){
  console.log('onresize')
}
function throttle(method,context){
          clearTimeout(method.timer);
          method.timer=setTimeout(function(){
              method.call(context);
          },500);
      }

window.onresize = ()=>throttle(fun,window)

应用场景:

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
• 搜索框搜索输入. 只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize. 只需窗口调整完成后，计算窗口大小. 防止重复渲染.

---

异同比较

相同点：

• 都可以通过使用 setTimeout 实现.
• 目的都是，降低回调执行频率. 节省计算资源.

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现. 函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能.
• 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次.

---

总结:

节流: 优化 每隔一段时间再去执行函数,防止太频繁的触发
防抖: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时.