关于什么是节流

概念

在连续触发事件n秒钟里，只执行一次函数叫做节流。

一句话概括就是：每隔一定时间，执行一次函数。

例如

当在玩王者荣耀的时候，当英雄的释放技能后都会进入一个冷却时间，当冷却时间结束后，技能方可再次释放

代码演示

利用 节流 来处理鼠标在盒子内滑动显示数字不断自加操作

const box = document.querySelector('.box')
    let i = 0
    function mouseMove() {
      box.innerHTML = ++i
    }
    
    // 节流函数
    function throttle(fn, t) {
      // 起始时间
      let old = 0
      return function () {
        // 得到当前时间
        let new = Date.now()
        // 判断如果大于等于500 采取调用函数
        if (now - starTime >= t) {
          // 调用函数
          fn()
          // 起始时间 - 现在的时间 写在调用函数的下面
          starTime = now
        }
      }
    }

    box.addEventListener('mousemove', throttle(mouseMove, 500))

核心思路 ：利用时间相减，当移动后的时间 - 刚开始移动的时间 >= 500ms 去执行 mouseMove函数

关于什么是防抖

概念

事件触发的n秒内只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行的时间

一句话概括就是：中间打断，重新计算时间

例如

在王者荣耀的时候，英雄在回城的时候会有一个进度条，中间打断，进度条会重新执行

代码演示

const box = document.querySelector('.box')
        let i = 0
        function mouseMove() {
            box.innerHTML = ++i
        }

        // 防抖函数
        function debounce(fn, t) {
            let timeId
            return function () {
                // 如果有定时器就清除
                if (timeId) clearTimeout(timeId)
                // 开启定时器
                timeId = setTimeout(() => {
                    fn()
                }, t)
            }
        }

        box.addEventListener('mousemove', debounce(mouseMove, 500))

核心思路 利用定时器实现，当鼠标滑过，判断有没有定时器，没有就清除，以最后一次滑动为准开启定时器