浅谈函数之防抖与节流

防抖与节流

 通常呢我们使用防抖与节流都是为了限制函数的频繁执行，使得性能大大降低，使得用户可能存在出现卡顿等等。

区别

• 防抖：只在设定的时间内执行一次代码
• 节流：在设定的时间内如果没有触发过该事件，才会触发事件

函数节流

 函数节流的场景往往在onscroll，resize，mousemove等等函数中应用，使得执行触发该事件所对应的代码时只在间隔设定的事件内执行，下面我们来上代码。
 节流函数：

/* 通过节流函数我们可以极大优化自己的性能,节约自己的性能 */
        function throttle(fn,delay) {
            //记录上一次函数触发的时间
            var lastTime = 0
            return function () {
                //记录当前函数触发的时间
                var nowTime = Data.now()
                /* 如果相差的事件大于延迟的时间则触发该函数 */
                if (nowTime - lastTime > delay) {
                    /* 为了防止函数多层嵌套导致this指向错误，此时在这里给fn绑定this */
                    fn().call(this)
                    //同步时间
                    /* 闭包，内部函数引用外部函数 */
                    lastTime = nowTime
                }
            }
        }

 滚动滚动条触发该事件

 /* 此时delay延迟的值为200ms */
 /* 绑定滚动函数,当滚动滚动条时触发此函数 */
 document.onscroll = throttle(function () {
     console.log('scroll事件被触发了',Date.now())
 },200)

执行结果：

 可以看出当我们频繁滑动滚动条时，触发该函数近似于200ms触发一次srcoll函数，那么此时我们节流函数就成功了。如果不添加节流函数时该函数自滚动开始就会被频繁触发。

函数防抖

函数防抖常常用于的场景为用户频繁点击提交按钮，频繁切换某选项的状态，频繁进行轮播图的翻页等等。下面我们来上代码。
 防抖函数：

function debounce(fn,delay) {
      //记录上一次的延时器
      var timer = null
      return function () {
          //清除上一次的定时器,当重复点击时，一上来就将上次点击第那个清除掉
          clearTimeout(timer)
          /* 重新设置上定时器 */
          time = setTimeout(function () {
              /* 防止多次指向时this发生改变 */
              fn.apply(this)
          },delay)
      }
  }

 点击函数代码：

/* 当用户点击按钮时触发函数 */
  document.getElementById('btn').onclick = debounce(function () {
       console.log('点击事件被触发了' + Date.now())
   },1000)

效果图：

 
 
 
 防抖与节流就介绍完了，欢迎评论区指正留言。