BOM之防抖与节流

函数防抖：

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

防抖的实现：

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>