JS函数的的防抖和节流

导读

防抖函数和节流函数作为js的高阶函数在工作中不仅经常能用到的面试中也会用到，本文将讲解节流和防抖的实现以及使用原理，希望对各位有所帮助；

函数防抖

概念：防抖指的是在事件被触发某个时间间隔(如: 300ms)后再执行相应的回调,如果在这个时间间隔内又被触发,则重新计时. 防抖稀释函数执行

防抖代码实现：

 function debounce(cb, delay) {
    var timer = null;
    let delay=delay||200
    return function() {
        var context = this;
        var args = arguments;
        if(timer !== null) {  // 在delay间隔内又被触发,则清空定时器,重新计时
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            cb.apply(context , args);
        }, delay);
    }
}

防抖函数使用场景

• 智能联想；

  例如在搜索的时候，监听输入框的输入事件，按下键盘，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求，这个时候就需要使用防抖函数进行优化；

• 当进行窗口的resize操作,scroll操作的时候；

节流函数

概念：函数节流指的是让原先频繁触发的函数回调在间隔某一段时间执行一次；

节流函数的实现

function throttle(fn, delay) {
    var flag = true
    let delay=delay||200
    return function (params) {
      if (!flag) return
      flag = false
      let _this = this
      let args = arguments
      timmer = setTimeout(() => {
        flag = true
        fn.apply(_this, args)
      }, delay);
    }
  }

节流函数使用场景

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

小结

节流和防抖主要适用于高频触发的操作，如果对于高频触发的时间我们不加以限制,会导致频繁的页面渲染和或者请求等。影响用户体验，此时我们可以用debounce()和throttle()的方式来减少回调被处罚的频率,这样既可以达到我们想要的效果又可以减弱对用户体验的影响。