防抖和节流函数，定义，使用场景，如何实现，面试题怎么回答

本篇文章主要从含义，使用场景，以及如何实现来街上防抖和节流函数

含义，防抖：解释是：该函数会从上一次被调用后，延迟 固定的 毫秒后再调用防抖函数，如果固定的时间还没到就再次调用函数，就清除定时器，重新计算。

节流函数的定义就是当一个函数频繁被触发，我们用来稀释函数出发频率的时候就会用到节流，节流函数是固定的毫秒之内只执行一次的函数。

认真仔细阅读对防抖和节流含义的理解。我们可以引出防抖和节流函数的使用场景。

首先是防抖

设想一个输入框，我们如何实现。肯定是先写好dom结构，再通过出发input输入框的change事件，来调取搜索的接口，假设这时候我们的搜索框功能没有被防抖优化。他的效果是什么样子的？ 每输入一个字母，input输入框里的值就会发生改变，就会调一次接口里的数据。这样对于我们的项目来说是否过于耗费性能。我们想要的效果是用户停止输入1s或者0.5s之后再调取接口的数据。这样性能就被大大优化了。

其次是节流

设想一个鼠标移动事件，或者滚轴滚动事件。在浏览器的网页里面，鼠标移动或者滚轴滚动事件触发，它的触发频率其实是非常高的，在不加节流的情况之下，用户的鼠标在页面中移动时，函数立即就会执行成百甚至上千次，这个时候事件开销就会非常大了，假如我们给事件加上节流函数，相当于稀释了事件的执行频率，可以设置一个时间，比如0.5s让它在0.5s执行一次节流函数，这样就大大节省了性能的开销。除此之外，我们登录时的用到的短信验证码，等59秒重新获取验证码，就是用到的节流函数，限制用户频繁获取验证码，将节流时间设置为59秒就可以了。

如何实现

在lodash库中有提供好的防抖和节流函数，可以直接引用。

可以自己手写防抖和节流，都是结合定时器去实现的，配合setTimeOut去写。
防抖：

function mydebounce(fn, delay) {
  // 创建一个变量, 用于记录上一次定时器
  let timer = null

  // 触发事件时执行的函数
  const _debounce = () => {
    // 第一次timer为null, 所有我们需要判断timer有值时清除定时器
    if (timer) clearTimeout(timer)

    // 延迟执行传入的fn回调
    timer = setTimeout(() => {
      fn()
      // 函数执行完成后, 我们需要将timer重置
      timer = null
    }, delay)
  }
  // 返回一个新的函数
  return _debounce
}

节流：

function mythrottle(fn, interval) {
  // 定义变量保记录开始时间
  let startTime = 0

  const _throttle = function() {
    // 获取当前时间
    const nowTime = new Date().getTime()
    // 计算需要等待的时间
    const waitTime = interval - (nowTime - startTime)

    // 当等待的时间小于等于0时, 执行回调函数 
    if (waitTime <= 0) {
      fn()
      // 并让开始时间等于现在时间 
      startTime = nowTime
    }
  }

  return _throttle
}

以上手写防抖和节流的代码仅供参考，很多公司的面试题都会让手写防抖和节流。有需要面试的可以回顾一下。

面试题怎么回答？？？

首先，当面试官问对防抖和节流了解多少，这个就可以先答对含义的理解，这个回答出来一定要有明显的区分，因为防抖和节流的定义是很相似的，这两个问题一般都是一起问，这时候要有很清晰的思路，重点回答出来他们的区别。把各自的使用场景分开来说，把自己带入进去，给面试官一种你对其非常了解，并且各种场景都是 真真实实碰到过的，自己亲手解决的。最后就可以说是怎么解决的，哪几种解决方法啊。
重要的就是要自信，带着对方的思路走，而不是等着被问。