JavaScript函数防抖和节流

一.认识防抖和节流

 

• JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
•  对于某些频繁的事件处理会造成性能的损耗，就可以通过防抖和节流来限制事件频繁的发生。

   防抖和节流严格算起来属于性能优化的知识，但实际开发遇到的频率非常高，处理不当或者放任不管就容易引起卡死。因此防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。比如:

• 防抖和节流有什么区别

• 如何应用防抖和节流

• 防抖和节流的内部原理,以及编写

  1.防抖（debounce）

        所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

   比如搜索

•  当我输入时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
• 当继续输入时，再次发送网络请求；
• 输入多少次，就请求多少次；
• 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力；

但我们需要这么多的网络请求吗？ 

• 不需要，正确的做法应该是在合适的情况下再发送网络请求，我们应该监听用户在某个时间，比如Xms内，没有再次触发时间时，再发送网络请求；

      1.1防抖基本功能 

• 当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）；
• 如果在延迟时间内，有重新触发函数，那么取消上一次的函数执行（取消定时器）；
• 如果在延迟时间内，没有重新触发函数，那么这个函数就正常执行（执行传入的函数）；

        防抖函数分为非立即执行版和立即执行版

               非立即执行版：

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

                     立即执行版：

function debounce(func,delay) {
    let timer = null
    return function () {
        let context = this
        let args = arguments

        if (timer) clearTimeout(timer)

        let callNow = !timer
        timer= setTimeout(() => {
            timer = null
        }, delay)

        if (callNow) func.apply(context, args)
    }
}

   2.节流（throttle） 

         节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

         2.1防抖基本功能 

                   节流函数的默认实现思路我们采用时间戳的方式来完成(也可使用定时器)

function throttle(fn, interval) {
  var last = 0
  return function() {
    var _self= this
    var _arguments = arguments
    var now = new Date().getTime()
    if (now - last > interval) {
      fn.apply(_self, _arguments)
      last = now
    }
  }
}

 关注前端公众号(前端中心),获取更多前端技术,共同成长.