JS防抖与节流

1. 防抖

作用：在单位时间内将频繁触发的事件降低为只触发最后一次。

应用场景：搜索框

实现方法：

1. 利用闭包原理创建私有变量存储定时器;

2. 在事件处理函数内先清除定时器，这么做是因为如果还未到时间内触发事件，重新计时;

3. 启动定时器并注入执行代码;

搜索框防抖demo

function debounce() {
      // 获取DOM元素
      const ipt = document.querySelector('input')
      let timerId
      // 绑定事件
      ipt.addEventListener('input', function() {
        // 当事件未到清除定时器
        clearInterval(timerId)
        // 启动定时器
        timerId = setTimeout(() => {
          console.log(ipt.value)
        }, 1000)
      })
    }
    // 调用防抖函数
    debounce()

2. 节流

作用：在单位时间内只触发一次事件。

应用场景：页面滚动

实现原理：

1. 利用闭包原理在外部函数定义记录触发时间的变量;

2. 在事件函数内获取时间戳;

3. 判断间隔时间,注入执行代码