防抖和节流函数及其简单应用

1. 防抖函数

经典使用场景：文本框输入文字时，延迟发起Ajax请求，从而不用每按下一个字都要发起请求

// 1. 防抖函数
    function debounce(fn, wait) {
      // 1. timer 定时器变量 节流阀
      var timer = null
      return function () {
        // 每次触发事件都先清除定时器,重新开启一个新的定时器
        clearTimeout(timer)
        // setTimeout 每次执行都会返回一个专属ID，用 timer 接收，方便清除
        timer = setTimeout(fn, wait)
      }
    }
 
    // 2. 实际触发事件后要延迟执行的处理的函数，项目中如发起Ajax请求
    function fn1() {
      console.log('ok')
    }
 
    // 3. 绑定事件，项目中如键盘 keyup 事件，
    //    每次触发 keyup 事件，都会调用debounce函数，进而处理fn1函数
    window.addEventListener('keyup', debounce(fn1, 500))

2. 节流函数

    // 1. 节流函数
    function throttle(fn, wait) {
      let canUse = true // 设置一个开关
      return function () {
        if (!canUse) {
          return false
        } // 如果开关已经关掉了就不用往下了
        canUse = false // 利用闭包刚进来的时候关闭开关
        setTimeout(() => {
          fn.apply(this, arguments) //fn放这里是非立即执行，定时器结束才执行
          canUse = true // 执行完才打开开关
        }, wait)
      }
      // 刚开始canUse为true，不会进入return，然后将canUse重置为false,进入了定时器，
      // 在定时器的时间期限之后，才会将canUse重置为true,canUse为true之后，之后的点击才会生效
      // 在定时器的时间期限内，canUse还没有重置为true，会一直进入return，就实现了在N秒内多次点击只会执行一次的效果
    }
 
    // 2. 要执行的函数
    function fn1() {
      console.log('ok')
    }
 
    // 3. 触发事件
    window.addEventListener('scroll', throttle(fn1, 500))