函数防抖和节流

在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。

1.函数防抖

单位时间内，频繁触发一个事件，以最后一次触发为准。

防抖的实现：

1. 声明一个全局变量存储定时器ID。
2. 每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

<input type="text" name="" id="inp">
<script>
  //输入框事件
  //声明全局变量存储定时器ID
  var timeID = null
  // 获取输入框节点
  var inp = document.getElementById('inp')
  // 输入框输入事件
  inp.oninput = function () {
    //1.先清除之前的定时器
    clearTimeout(timeID)
    //2.开启本次定时器
    timeID = setTimeout(() => {
      console.log(`输入的内容是${this.value}`)
    }, 500)
  }
</script>

函数节流

单位时间内，频繁触发一个事件，只会触发一次。

节流的实现：

1. 声明一个全局变量存储触发事件。
2. 每一次触发事件，获取当前时间。
3. 判断当前时间与上一次触发事件，是否超过了间隔。
4. 如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

<button id="btn">点我呀</button>
<script>
  //声明一个全局变量存储触发时间
  let lastTime = null
  // 获取按钮节点
  var btn = document.getElementById('btn')
  //页面滚动事件
  btn.onclick = function () {
    //1.每一次触发 先获取本次时间戳
    let currentTime = Date.now()
    //2.判断当前时间 与 上次触发时间 是否超过间隔
    if (currentTime - lastTime >= 3000) {
      console.log(this.innerHTML)
      //3.存储本次的触发时间
      lastTime = currentTime
    }
  }
</script>