防抖与节流

防抖

        含义： 持续触发的事件， 只执行最后一次

// 防抖核心代码
// 全局定义一个 timeId = null
let timeId = null
对象.addEventListener('mousemove', () => {
  // 清除上一次定时器
  clearTimeout(timeId)  //核心
  // 开启新的定时器
  timeId = setTimeout(() => {
    // 要执行的代码
    // TODO...
  }, 间隔时间)
})

节流

        含义： 持续触发的事件， 每隔一段时间触发一次

// 1.全局声明一个变量 flag = true
// 2.在持续触发事件/方法内 写以下代码
let flag = true
if (flag) {
  // 关门
  flag = false

  // 要执行的代码片段
  // TODO...

  // 从关门那一刻开始计算时间，设定时间到后开门
  setTimeout(() => {
    flag = true
  }, 间隔时间)
}

节流和防抖的区别是？

        节流: 就是指连续触发事件但是在 n 秒中只执行一次函数,比如 可以利用节流实现 1s之内 只能触发一次鼠标移动事件
                 持续触发事件，每一段事件触发一次

        防抖：如果在 n 秒内又触发了事件，则会重新计算函数执行时间
                  持续触发事件，代码只执行最后一次

节流和防抖的使用场景是？
        节流: 鼠标移动，页面尺寸发生变化，滚动条滚动等开销比较大的情况下
        防抖: 搜索框输入，设定每次输入完毕n秒后发送请求，如果期间还有输入，则从新计算时间