函数防抖和节流

前端性能优化之函数防抖和节流

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

1.防抖(debounce)

应用场景

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存
4. mousemove、mouseover鼠标移动事件防抖
5. 搜索框搜索输入。只需用户最后一次输入完，再发送请求防抖
6. 手机号、邮箱验证输入检测

function debounce(fnc,delay) {
      let timer = null;
      return (...args) => {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fnc.apply(this,args)
        },delay)
      }
    },

2.节流 (throttle)

应用场景

1. scroll 事件，滚动监听事件，每隔一秒计算一次位置信息等
2. 浏览器播放事件，每个一秒计算一次进度信息等
3. input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)
4. 高频点击提交，表单重复提交

function throttle(fnc,delay) {
      let timer;
      return (...args) => {
        if(timer) return ;
        timer = setTimeout(() => {
          fnc.apply(this,args);
          timer = null;
        },delay)
      }
    }

防抖，在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

节流，规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

防抖关注一定时间连续触发的事件只在最后执行一次
节流侧重于一段时间内只执行一次。

总结：防抖就是男孩子手冲，冲到最后才出来。节流就像是我们打游戏的技能cd