函数的防抖与节流

一、防抖与节流的联系

        相同点：防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费

        不同点：节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除

二、节流函数

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

        2.分类：        

        （1）使用时间戳实现的节流函数会在第一次触发事件时立即执行，以后每过 delay 秒之后才执行一次，并且最后一次触发事件不会被执行

        节流函数输入一个函数并返回一个函数（高阶函数）

        节流使用闭包，保存上一次触发回调的时间 last，执行函数 func，时间阀值delay

        在要执行 func 时，当前时间与上一次触发时间进行比较，如果时间间隔大于interval(now - last >= interval)，执行函数 func.apply(context, args)

// 时间戳方式
// 节流 事件连续触发在n秒内只触发一次
function throttle(func, interval) {
  // last为上一次触发回调的时间
  let last = 0;
  // 将throttle处理结果当作函数返回
  return function() {
    // 保留调用时的this上下文
    let context = this;
    // 保留调用时传入的参数
    let args = arguments;
    // 记录本次触发回调的时间
    let now = Date.now();
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now
      func.apply(this, args);
    }
  }
}

        （2）定时器实现的节流函数在第一次触发时不会执行，而是在 interval秒之后才执行，当最后一次停止触发后，还会再执行一次函数

// 定时器方式
function throttle1(func, interval) {
  let sign = true;
  return function() {
    // 在函数开头判断标志是否为 true，不为 true 则中断函数
    if (!sign) return;
    //  sign 设置为 false，防止执行之前再被执行
    sign = false;
    setTimeout(() => {
      func.apply(this, arguments)
      // 执行完事件之后，重新将这个标志设置为 true
      sign = true;
    }, interval)
  }
}

        3.使用场景 

        节流一般用于鼠标的跟随动画实现，scroll，resize, touchmove, mousemove等极易持续性促发事件的相关动画问题，降低频率

<!-- 节流函数 获取鼠标在元素上的坐标 -->
<style>
  .container {
    width: 100px;
    height: 100px;
    background-color: #3496db;
  }
</style>

<div class="container"></div>

<script>
  function throttle(func, interval) {
    let last = 0;
    return function() {
      let args = arguments;
      let now = Date.now();
      if (now - last > interval) {
        func.apply(this, args);
        last = now
      }
    }
  }
  box.addEventListener('mousemove', throttle(function(e){
    console.log(e.pageX)
  }, 2000))
</script>

三、防抖函数

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

<input type="text">
<script>
  // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒内重复触发则重新计算函数执行时间
  function debounce(func, interval) {
    // 设置标识符
    let timer = null;
    return function () {
      // 判断定时器是否存在，清除定时器
      timer && clearTimeout(timer)
      // 重新调用setTimeout
      timer = setTimeout(() =>  {
        func.apply(this, arguments)
        timer = null;
      }, interval)
    }
  }
  let input = document.querySelector('input');
  let inputValue = debounce(inputChange, 1000)
  function inputChange(e) {
    console.log(e.target.value)
  }
  input.addEventListener('keyup', inputValue)
</script>

        防抖函数也是一个高阶函数，也使用了闭包，与节流不同，此处闭包保存的是setTimeout 返回的 timer，用于在后续持续触发之前及时取消定时器

        2.使用场景

        防抖一般用于表单元素的校验，如手机号，邮箱，用户名等，部分搜索功能的模糊查询结果实现

<!-- 防抖函数 表单校验 -->
<input type="text" replacer="请输入内容">
<script>
  let input = document.querySelector('input');
  function debounce(func, interval) {
    let timer;
    return function() {
      timer && clearTimeout(timer)
      let args = arguments;
      timer = setTimeout(() => {
        func.apply(this, args)
        timer = null;
      }, interval)
    }
  }
  input.addEventListener('keyup', debounce(function(event) {
    let regexp = /\d/g;
    if(!regexp.test(event.target.value)) {
      console.log('输入错误')
    } else {
      console.log(event.target.value)
    }
  }, 1000))
</script>