函数节流与防抖

事件频繁触发带来的问题

1. 一些浏览器的事件,触发的频率非常高,高触发的同时,不仅浪费了浏览器的资源,还会影响浏览器的性能.
2. 同时如果事件中包含着向后台发送请求的操作,频繁触发下,对服务器也会造成不必要的压力.
3. 频繁触发下浏览器的响应也会在有些时候影响用户体验.
   当然,问题的产生,自然就有解决方案.函数防抖与函数节流能够很好的优化js代码的执行

函数防抖

• 函数防抖的实现原理,就是在函数频繁触发下,在规定的时间内,只让最后一次的触发生效,前面的触发不生效.
• 适合多次事件触发一次响应的情况
• 适用场景:实时搜索联想(keyup事件);文本输入验证(连续输入文字后发送ajax请求验证,验证一次就好)

自定义简易实现函数防抖的功能:

function debounce(callback,delay) {
      return function () {
        const that = this
        const args = arguments
        
        if (callback.timeId) {
          clearTimeout(callback.timeId)
        }
        callback.timeId = setTimeout(function () {
          callback.apply(that,args)
          delete callback.timeId
        }, delay);
      }
    }

函数节流

• 函数节流,也是优化js代码执行一种手段,在频繁触发下,代码块执行的次数过多,大部分的重复的执行是没有必要的.在这样的情况下,我们很有必要去降低代码执行的频率,减轻代码的压力.从而提高程序的运行效率.
  节流的目的就是在一段时间内代码只执行一次.
• 使用场景:窗口调整,页面滚动,元素拖拽,以及平时生活中最为常见的抢购疯狂点击等

自定义简易实现函数节流的功能:

function throttle(callback,delaty){
      let start = 0 
      return function () {
        const current = Date.now()
        if(current - start > delaty){
          callback.apply(this,arguments)
          start = current
        }
      }
    }

自定义实现某些功能仅仅是为了更好的理解某些功能的实现原理.从而更好地应用!!!