v3_71
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="./node_modules/lodash/lodash.min.js"></script>
  <style>
    div {
      width: 500px;
      height: 240px;
      background-color: pink;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="oDiv"></div>
  <script>
    // 是什么？
    // 防抖和节流都是性能优化的一种手段。
    // 防抖：持续触发不执行，不触发的一段时间后才执行。
    // 节流：持续触发也执行，只不过，执行的频率变低了。
    // 实现一个？
    // 匈牙利命名法的简版
    // 类型 + 具体的含义
    // 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);
  </script>
</body>

</html>