面试题：防抖节流 口述具体实现

防抖节流介绍与实现

        防抖（debounce）就是在一定的时间内没有操作就执行该函数，如果在此时间内操作了则重新计时,比如搜索框的输入。

        节流就是一定的时间内只发送一次请求，实际应用 验证码

防抖动和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

---

函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次。

应用场景：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

简单实现：
        函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。

 function debounce(delay, callback) {
      // 闭包会保存变量
      let timer=null
      return function(){
        clearTimeout(timer)
        timer=setTimeout(function(){
          callback()
        },delay)
      }
    }

---

函数节流：限制一个函数在一定时间内只能执行一次。

应用场景：
滚动加载，加载更多或滚到底部监听
高频点击提交，表单重复提交
简单实现：
函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

 function throttle(delay, callback) {
      let timer = null

      return function () {
        // 如果定时器不存在就执行回调函数
        if (!timer) {
          timer = setTimeout(function () {
            callback()
            // 当本次事件结束后，将定时器清空来进行下一次事件
            timer = null
          }, delay)

        }
      }

    }