防抖和节流

防抖概念：

当持续触发事件时，设定的时间段内没有再触发事件，事件处理函数（回调函数）才会执行一次，如果设定的时间段内，再次触发事件，则重新开始计时

典型场景：输入框输入关键词触发搜索

关键点：

1、每次触发事件都会执行防抖函数

2、每次触发事件不一定执行回调函数（业务处理函数）

3、回调函数（业务处理函数）的执行条件：事件触发防抖函数执行，触发时间间隔 >= 指定时间

代码实现（闭包函数）：

 //业务处理函数
  function cb() {
    console.log('业务处理函数执行了', Math.random())
  }

 //防抖函数--使用闭包函数
 function debounce(cb, ms) {
    //setTimeout 返回的id值
    let timer = null
    return function () {
      console.log('防抖函数执行,清除旧的', timer)
      //清除上一次的定时器
      clearTimeout(timer)
      timer = setTimeout(() => cb(), ms)
      console.log('防抖函数执行，生成新的', timer)
    }
  }
  const fangdou = debounce(cb, 1000)
  // console.dir(fangdou)
  window.addEventListener('scroll', fangdou)

节流概念：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

节流通俗解释就比如我们水龙头放水，不让水一直流动，而是把水龙头关小点，按照一定规律在某个时间间隔内一滴一滴的往下滴。

应用场景：

1、 鼠标连续不断地触发某事件（如点击），只在一定时间段内只触发一次。

2、比如懒加载时要监听计算滚动条的位置。

代码实现（闭包函数）：

 //业务处理函数
  function cb() {
    console.log('业务处理函数执行了', Math.random())
  }
  //节流函数--使用闭包函数
  function throttle(cb, delay) {
    let valid = true //此次触发是否有效
    return function () {
      //valid 不满足条件执行 return false
      if (!valid) {
        return false// 工作时间，执行函数并且在间隔期内把状态位设为无效
      }
      valid = false // 工作时间，执行函数并且在间隔期内把状态位设为无效
      setTimeout(() => {
        cb() //执行业务处理函数
        valid = true  // 此次执行完毕，准备下次执行
      }, delay)
    }
  }
  const jieliu = throttle(cb, 1000)
  window.addEventListener('scroll', jieliu)