函数到防抖与节流

前言

在前端项目中，函数的防抖和节流应该算是身为一名合格的前端工程师必须掌握的知识了。

函数的防抖和节流的是什么

• 函数的防抖:事件完成某段固定的时长后执行相应的函数
• 函数的节流:事件执行期间每隔一段时间执行相应的函数
• 函数的防抖与节流的区别在我看来有点类似生活中快递和外卖的区别：
  快递：一天中任何时间下的单一般都是晚上发货（固定时长）
  外卖：下单后饭做好后（每隔一段时间）立即送餐

为什么要掌握防抖和节流

函数节流（throttle）与函数防抖（debounce）都是可以限制函数的执行频次，根据不同的场景来对执行频率进行限制，避免了函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数的防抖和节流应用实例与实现

• 防抖的应用

  1.防抖一般我们在搜索过滤功能中应用较多，如果只是监听搜索框的变化来搜索那搜索的频率会过高，导致页面抖动。因此我们需要限制搜索次数，等到输入最后一次（也可能是中间暂停的某次）间隔0.5秒后在执行搜索，这样就能控制搜索的频率了。

  2.表单重复提交

  3.滚动刷新
  实例代码1：

   var timer = null
   function debounce(fn,time){
        //触发频率小于500ms是则清除上次未执行的
        clearTimeout(timer)
        timer = setTimeout(function(){
            console.log('====执行=====')
            fn()
        },time)
   }
   //监听搜索input change事件
   element.addEventListener("input", function(event) {
    debounce(searchFunc,500)
   })
   //搜索
   searchFunc(){
       console.log('====serch=====')
   }

实例代码2-闭包实现：

//待完善

• 节流的应用

  1.canvas画笔功能

  2.页面元素的拖拽

  实例代码1：

  var startTime = 0
  function throttle(fn,time){
      let nowTime = (new Date()).valueOf()
      if(nowTime-startTime > time){
          fn()
          startTime = nowTime
      }
  }
  
  document.addEventListener("mousemove",function(){
    //每隔1秒执行一次drag
     throttle(drag(),1000)
  });
  function drag(){
     console.log('=====执行=====')
  }

  实例代码2-闭包实现：

  //待完善

总结

在页面负载比较大的情况下，如何减少对浏览器内存的消耗是前端优化的必须要考虑到的。而防抖与节流的概念可以让我们极大的节约对浏览器内存的消耗，所以掌握防抖与节流是前端必备技能之一。