防抖和节流我见过的最标准的说法

我以前写的帖子: 防抖和节流

是什么,定义？

防抖和节流都是性能优化的一种手段。

防抖：持续触发不执行，不触发的一段时间后才执行。

节流：持续触发也执行，只不过，执行的频率变低了。

实现防抖和节流:

// const iNum = 8
// const bBar = false
// const aDiv = document.querySelctorAll('div')
// 把鼠标相对于盒子位置放到盒子里面
/*  oDiv.onmousemove = function (e) {
       let x = e.pageX - this.offsetLeft
       let t = e.pageY - this.offsetTop
       this.innerHTML = `x: ${x}, y: ${t}`
     }; */

// 防抖一下
/* let timer = null
    oDiv.onmousemove = function (e) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        let x = e.pageX - this.offsetLeft
        let t = e.pageY - this.offsetTop
        this.innerHTML = `x: ${x}, y: ${t}`
      }, 200)
    }; */
// 封装一个防抖/节流函数？
/* const debounce = (callback, time) => {
      let timer = null
      return function (e) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          callback.call(this, e) // window.callback(e)
        }, time)
      }
    } */

/* oDiv.onmousemove = _.debounce(function (e) {
      let x = e.pageX - this.offsetLeft
      let t = e.pageY - this.offsetTop
      this.innerHTML = `x: ${x}, y: ${t}`
    }, 200) */
// 生活中的例子？
// 王者荣耀英雄回城是防抖还是节流
// 打散弹枪，节流

// 应用场景？
// 根据输入的内容请求接口？防抖
// 获取窗口缩放的大小，滚动位置？节流

// 实际开发怎么做？
oDiv.onmousemove = _.throttle(function (e) {
  let x = e.pageX - this.offsetLeft
  let t = e.pageY - this.offsetTop
  this.innerHTML = `x: ${x}, y: ${t}`
}, 1000)