1 手ぶれ補正とスロットルを理解する

2 underscore使用

3 手ぶれ補正機能の最適化

4 スロットル機能の最適化

5 ディープコピー機能の実装

6 イベントバスツールの実装

つまり、アンチシェイクとは、イベントをトリガーし続けて実行を遅らせることです。

スロットリングは、途中で何度トリガーしても、時々実行されます。

手ぶれ補正 - 手ぶれ補正の動作を理解する

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>
  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.监听input元素的输入
    // let counter = 1
    // inputEl.oninput = function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }
    
    // 3.防抖处理代码
    let counter = 1
    inputEl.oninput = _.debounce(function() {
      console.log(`发送网络请求${counter++}:`, this.value)
    }, 3000)

  </script>

</body>

手ぶれ補正～手ぶれ補正の実現～基本実装（インタビュー）

以前に実行した関数をキャンセルするには、以前に実行した関数を取得する必要があります。ここでは、let タイマーを通じて取得します。

遅延実行は主にタイマーによって実現され、タイマーにはタイマーを null に設定してクリアする効果があります。

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hydebounce(fn, delay) {
      // 1.用于记录上一次事件触发的timer
      let timer = null

      // 2.触发事件时执行的函数
      const _debounce = () => {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          fn()
          timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
   

    // 3.自己实现的防抖
    let counter = 1
    inputEl.oninput = hydebounce(function() {
      console.log(`发送网络请求${counter++}`)
    }, 1000)

  </script>

</body>

アンチシェイクの実装アンチシェイク-this とパラメーターバインディング

これを結合するプロセスは、

dom イベントにはバインドされたイベントもあります。hudebounce を記述するとき、実際には _debounce を実行しているため、この関数は実際には暗黙的に inputEl にバインドされており、これを取得するのが inputEl です。また、const _debounce = function(...args) はイベントとその他のパラメーターを取得し、それらを fn 関数に渡すことができます。

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hydebounce(fn, delay) {
      // 1.用于记录上一次事件触发的timer
      let timer = null

      // 2.触发事件时执行的函数
      const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 未进行防抖处理代码
    // let counter = 1
    // inputEl.oninput = function(event) {
    //   console.log(`发送网络请求${counter++}:`, this, event)
    // }

    // 2.underscore防抖处理代码
    // let counter = 1
    // inputEl.oninput = _.debounce(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的防抖
    let counter = 1
    inputEl.oninput = hydebounce(function(event) {
      console.log(`发送网络请求${counter++}:`, this, event)
    }, 1000)

  </script>

</body>

手ぶれ補正 - 手ぶれ補正を実現 - キャンセル機能の実現

oninput イベントは入力されると必ず実行されます。このイベントの実行をキャンセルするボタンを設定できます。実装方法についてはコードを参照してください。主な理由は、hudebounce の _debounce がオブジェクト型であるため、関数で直接実行をキャンセルできることです。

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hydebounce(fn, delay) {
      // 1.用于记录上一次事件触发的timer
      let timer = null

      // 2.触发事件时执行的函数
      const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
      }

      // 3.给_debounce绑定一个取消的函数
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 未进行防抖处理代码
    // let counter = 1
    // inputEl.oninput = function(event) {
    //   console.log(`发送网络请求${counter++}:`, this, event)
    // }

    // 2.underscore防抖处理代码
    // let counter = 1
    // inputEl.oninput = _.debounce(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的防抖
    let counter = 1
    const debounceFn = hydebounce(function(event) {
      console.log(`发送网络请求${counter++}:`, this, event)
    }, 5000)
    inputEl.oninput = debounceFn

    // 4.实现取消的功能
    cancelBtn.onclick = function() {
      debounceFn.cancel()
    }

  </script>

</body>

手ぶれ補正 - 手ぶれ補正を実現 - 機能を即座に実行

アプリケーションのシナリオとしては、ユーザーが book を入力すると、最初に b が入力されたときにすぐに実行され、その後の ook に手ぶれ補正効果があることが考えられます。isInvoke は別の変数を通じて制御されます。

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    // 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态

    function hydebounce(fn, delay, immediate = false) {
      // 1.用于记录上一次事件触发的timer
      let timer = null
      let isInvoke = false

      // 2.触发事件时执行的函数
      const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 第一次操作是不需要延迟
        if (immediate && !isInvoke) {
          fn.apply(this, args)
          isInvoke = true
          return
        }

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null // 执行过函数之后, 将timer重新置null
          isInvoke = false
        }, delay);
      }

      // 3.给_debounce绑定一个取消的函数
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 未进行防抖处理代码
    // let counter = 1
    // inputEl.oninput = function(event) {
    //   console.log(`发送网络请求${counter++}:`, this, event)
    // }

    // 2.underscore防抖处理代码
    // let counter = 1
    // inputEl.oninput = _.debounce(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的防抖
    let counter = 1
    const debounceFn = hydebounce(function(event) {
      console.log(`发送网络请求${counter++}:`, this, event)
    }, 100)
    inputEl.oninput = debounceFn

    // 4.实现取消的功能
    cancelBtn.onclick = function() {
      debounceFn.cancel()
    }

  </script>

</body>

アンチシェイク - アンチシェイクの実装 - 戻り値の取得

戻り値を取得するにはpromiseを使用します。

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    // 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态

    function hydebounce(fn, delay, immediate = false, resultCallback) {
      // 1.用于记录上一次事件触发的timer
      let timer = null
      let isInvoke = false

      // 2.触发事件时执行的函数
      const _debounce = function(...args) {
        return new Promise((resolve, reject) => {
          try {
            // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
            if (timer) clearTimeout(timer)

            // 第一次操作是不需要延迟
            let res = undefined
            if (immediate && !isInvoke) {
              res = fn.apply(this, args)
              if (resultCallback) resultCallback(res)
              resolve(res)
              isInvoke = true
              return
            }

            // 2.2.延迟去执行对应的fn函数(传入的回调函数)
            timer = setTimeout(() => {
              res = fn.apply(this, args)
              if (resultCallback) resultCallback(res)
              resolve(res)
              timer = null // 执行过函数之后, 将timer重新置null
              isInvoke = false
            }, delay);
          } catch (error) {
            reject(error)
          }
        })
      }

      // 3.给_debounce绑定一个取消的函数
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 2.手动绑定函数和执行
    const myDebounceFn = hydebounce(function(name, age, height) {
      console.log("----------", name, age, height)
      return "coderwhy 哈哈哈哈"
    }, 1000, false)

    myDebounceFn("why", 18, 1.88).then(res => {
      console.log("拿到执行结果:", res)
    })

  </script>

</body>

アンチシェイク - アンチシェイクを実現 - 独立したファイルをカプセル化

カプセル化されたコード:


// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态
function hydebounce(fn, delay, immediate = false, resultCallback) {
  // 1.用于记录上一次事件触发的timer
  let timer = null
  let isInvoke = false

  // 2.触发事件时执行的函数
  const _debounce = function(...args) {
    return new Promise((resolve, reject) => {
      try {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 第一次操作是不需要延迟
        let res = undefined
        if (immediate && !isInvoke) {
          res = fn.apply(this, args)
          if (resultCallback) resultCallback(res)
          resolve(res)
          isInvoke = true
          return
        }

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          res = fn.apply(this, args)
          if (resultCallback) resultCallback(res)
          resolve(res)
          timer = null // 执行过函数之后, 将timer重新置null
          isInvoke = false
        }, delay);
      } catch (error) {
        reject(error)
      }
    })
  }

  // 3.给_debounce绑定一个取消的函数
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  // 返回一个新的函数
  return _debounce
}

実行されたコード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>
</head>
<body>
  
  <input type="text">
  <button class="cancel">取消</button>

  <script src="./js/hy_debounce.js"></script>
  <script>
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    let counter = 1
    const debounceFn = hydebounce(function(event) {
      console.log(`发送网络请求${counter++}:`, this, event)
    }, 1000)
    inputEl.oninput = debounceFn

    // 4.实现取消的功能
    cancelBtn.onclick = function() {
      debounceFn.cancel()
    }
  </script>
</body>
</html>

スロットル - スロットル操作について

サードパーティのライブラリを使用する

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>
  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

  

    // 4.节流处理代码
    let counter = 1
    inputEl.oninput = _.throttle(function() {
      console.log(`发送网络请求${counter++}:`, this.value)
    }, 1000)

  </script>

</body>

スロットリング - スロットリングの実現 - 基本的な実装 (インタビュー)

スロットル効果を実現するには計算式を使用する必要があります

const waitTime = 間隔 - (nowTime - startTime)

waitTime は、fn 関数を実行するかどうかを決定するために使用されます。

間隔はユーザーが指定した実行間隔です。

nowTime は、ハイスロットルが毎回記録される時点です

startTime は毎回 fn が実行された時点を記録し、if 判定によって fn 関数を実行するかどうかを決定します。
<body>

  <button>按钮</button>

  <input type="text">
  
  
  
  
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval) {
      let startTime = 0

      const _throttle = function() {
        const nowTime = new Date().getTime()
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          fn()
          startTime = nowTime
        }
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1
    inputEl.oninput = hythrottle(function() {
      console.log(`发送网络请求${counter++}:`, this.value)
    }, 1000)


  </script>

</body>

スロットル実装のスロットリングとパラメータのバインディング

実装原理は以前のアンチシェイクと同じで、暗黙的バインディング方式を使用します。fn.apply(this, args)

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval) {
      let startTime = 0

      const _throttle = function(...args) {
        const nowTime = new Date().getTime()
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          fn.apply(this, args)
          startTime = nowTime
        }
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1
    inputEl.oninput = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
    }, 1000)

  </script>

</body>

スロットル - スロットリングを実装 - すぐに制御を実行します

すぐに実行し、最後に実行します。

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval, leading = true) {
      let startTime = 0

      const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
          startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          fn.apply(this, args)
          startTime = nowTime
        }
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1
    inputEl.oninput = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
    }, 1000)

  </script>

</body>

スロットル - スロットリングの実装 - テール実行制御 (理解)

手ぶれ補正と異なり、手ぶれ補正は最後に実行する必要がありますが、スロットリングは制限時間に達しないと最後に実行されません。

<body>

  <button>按钮</button>

  <input type="text">
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval, { leading = true, trailing = false } = {}) {
      let startTime = 0
      let timer = null

      const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
          startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          // console.log("执行操作fn")
          if (timer) clearTimeout(timer)
          fn.apply(this, args)
          startTime = nowTime
          timer = null
          return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
          timer = setTimeout(() => {
            // console.log("执行timer")
            fn.apply(this, args)
            startTime = new Date().getTime()
            timer = null
          }, waitTime);
        }
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1
    inputEl.oninput = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
    }, 3000, { trailing: true })

  </script>

</body>

スロットル - スロットルの実装 - キャンセル機能の実装

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval, { leading = true, trailing = false } = {}) {
      let startTime = 0
      let timer = null

      const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
          startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          // console.log("执行操作fn")
          if (timer) clearTimeout(timer)
          fn.apply(this, args)
          startTime = nowTime
          timer = null
          return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
          timer = setTimeout(() => {
            // console.log("执行timer")
            fn.apply(this, args)
            startTime = new Date().getTime()
            timer = null
          }, waitTime);
        }
      }

      _throttle.cancel = function() {
        if (timer) clearTimeout(timer)
        startTime = 0
        timer = null
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1

    const throttleFn = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
    }, 3000, { trailing: true })

    inputEl.oninput = throttleFn

    cancelBtn.onclick = function() {
      throttleFn.cancel()
    }

  </script>

</body>

スロットル - スロットルの実装 - 戻り値の取得

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>

  <script>
    function hythrottle(fn, interval, { leading = true, trailing = false } = {}) {
      let startTime = 0
      let timer = null

      const _throttle = function(...args) {
        return new Promise((resolve, reject) => {
          try {
             // 1.获取当前时间
            const nowTime = new Date().getTime()

            // 对立即执行进行控制
            if (!leading && startTime === 0) {
              startTime = nowTime
            }

            // 2.计算需要等待的时间执行函数
            const waitTime = interval - (nowTime - startTime)
            if (waitTime <= 0) {
              // console.log("执行操作fn")
              if (timer) clearTimeout(timer)
              const res = fn.apply(this, args)
              resolve(res)
              startTime = nowTime
              timer = null
              return
            } 

            // 3.判断是否需要执行尾部
            if (trailing && !timer) {
              timer = setTimeout(() => {
                // console.log("执行timer")
                const res = fn.apply(this, args)
                resolve(res)
                startTime = new Date().getTime()
                timer = null
              }, waitTime);
            }
          } catch (error) {
            reject(error)
          }
        })
      }

      _throttle.cancel = function() {
        if (timer) clearTimeout(timer)
        startTime = 0
        timer = null
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1

    const throttleFn = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
      return "throttle return value"
    }, 3000, { trailing: true })

    throttleFn("aaaa").then(res => {
      console.log("res:", res)
    })

  </script>

</body>

スロットル - スロットリングの実装 - 独立したファイルのカプセル化

アンダースコア.js

function hythrottle(fn, interval, { leading = true, trailing = false } = {}) {
  let startTime = 0
  let timer = null

  const _throttle = function(...args) {
    return new Promise((resolve, reject) => {
      try {
         // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
          startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          // console.log("执行操作fn")
          if (timer) clearTimeout(timer)
          const res = fn.apply(this, args)
          resolve(res)
          startTime = nowTime
          timer = null
          return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
          timer = setTimeout(() => {
            // console.log("执行timer")
            const res = fn.apply(this, args)
            resolve(res)
            startTime = new Date().getTime()
            timer = null
          }, waitTime);
        }
      } catch (error) {
        reject(error)
      }
    })
  }

  _throttle.cancel = function() {
    if (timer) clearTimeout(timer)
    startTime = 0
    timer = null
  }

  return _throttle
}

<body>

  <button>按钮</button>

  <input type="text">
  <button class="cancel">取消</button>
  
  <!-- CDN引入: 网络的js文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> -->
  <!-- 本地引入: 下载js文件, 并且本地引入 -->
  <script src="./js/underscore.js"></script>
  <script src="./js/hy_throttle.js"></script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")
    const cancelBtn = document.querySelector(".cancel")

    // 2.underscore节流处理代码
    // let counter = 1
    // inputEl.oninput = _.throttle(function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }, 1000)

    // 3.自己实现的节流函数
    let counter = 1
    const throttleFn = hythrottle(function(event) {
      console.log(`发送网络请求${counter++}:`, this.value, event)
      return "throttle return value"
    }, 3000)

    inputEl.oninput = throttleFn

  </script>

</body>

深いコピー - および浅いコピー - 割り当て関係を導入します

浅いコピーとは、あるオブジェクト型の値を別のオブジェクトにコピーすることです。2 つのオブジェクトは同じ値を持ちますが、それぞれ値を変更しても、もう一方のオブジェクトの値に影響を与える参照割り当ては行われません。 2 つのオブジェクトのメモリ。アドレスが異なり、2 つの異なるオブジェクトタイプです。

深いコピーとは、オブジェクト内のオブジェクトの浅いコピーが浅いコピーに基づいて実装できる状況です。

ディープコピーの最初の方法は、JSON メソッドを使用して最初に文字列に変換し、次にそれをオブジェクトに変換することです。その後、オブジェクト内のオブジェクトをディープコピーオブジェクトに変換できます。ただし、これには、オブジェクト内に関数または [Symbol()]: "abc" がある場合、それは無視されて取得できず、ループされたオブジェクトも使用できないという欠点があります (window.window.window.window)。。
  console.log(window.window === window)

    const info = {
      name: "why",
      age: 18,
      friend: {
        name: "kobe"
      },
      running: function() {},
      [Symbol()]: "abc",
      // obj: info
    }
    info.obj = info

    // 1.操作一: 引用赋值
    // const obj1 = info

    // 2.操作二: 浅拷贝
    // const obj2 = { ...info }
    // // obj2.name = "james"
    // // obj2.friend.name = "james"
    // // console.log(info.friend.name)

    // const obj3 = Object.assign({}, info)
    // // obj3.name = "curry"
    // obj3.friend.name = "curry"
    // console.log(info.friend.name)

    // 3.操作三: 深拷贝
    // 3.1.JSON方法
    // const obj4 = JSON.parse(JSON.stringify(info))
    // info.friend.name = "curry"
    // console.log(obj4.friend.name)
    // console.log(obj4)

    // 3.2.自己编写一个深拷贝函数(第三方库)

ディープコピー - ディープコピー機能の基本的な使用法

オブジェクト型(ここでは関数や配列型を除く)かどうかを判定するツールは_object.js

// 需求: 判断一个标识符是否是对象类型
function isObject(value) {
  // null,object,function,array
  // null -> object
  // function -> function -> true
  // object/array -> object -> true
  const valueType = typeof value
  return (value !== null) && ( valueType === "object" || valueType === "function" )
}

// const name = "why"
// const age = 18
// const foo = {}
// const bar = function() {}
// const arr = []

// console.log(isObject(null)) // false
// console.log(isObject(bar)) // true
// console.log(isObject(name)) // false
// console.log(isObject(foo)) // true
// console.log(isObject(arr)) // true

ディープコピーペアタイプのカーネル関数

ここでコピーされるのはオブジェクトの中にオブジェクトがある状況です。

  <script src="./js/is_object.js"></script>
  <script>
    // 深拷贝函数
    function deepCopy(originValue) {
      // 1.如果是原始类型, 直接返回
      if (!isObject(originValue)) {
        return originValue
      }

      // 2.如果是对象类型, 才需要创建对象
      const newObj = {}
      for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
      }
      return newObj
    }

    const info = {
      name: "why",
      age: 18,
      friend: {
        name: "kobe",
        address: {
          name: "洛杉矶",
          detail: "斯坦普斯中心"
        }
      }
    }

    const newObj = deepCopy(info)
    info.friend.address.name = "北京市"
    console.log(newObj.friend.address.name)

  </script>

ディープコピー - ディープコピー機能の配列コピー

ここでコピーされるのは、配列内にオブジェクト型が存在する場合の状況です。

<script src="./js/is_object.js"></script>
  <script>
    // 深拷贝函数
    function deepCopy(originValue) {
      // 1.如果是原始类型, 直接返回
      if (!isObject(originValue)) {
        return originValue
      }

      // 2.如果是对象类型, 才需要创建对象
      const newObj = Array.isArray(originValue) ? []: {}
      for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
      }
      return newObj
    }

    const books = [
      { name: "黄金时代", price: 28, desc: { intro: "这本书不错", info: "这本书讲了一个很有意思的故事" } },
      { name: "你不知道JavaScript", price: 99 },
    ]

    // const newBooks = [...books]
    // newBooks[0].price = 88
    // console.log(books[0].price)

    const newBooks = deepCopy(books)
    console.log(newBooks)

  </script>

ディープコピー - 他の種類のディープコピー機能

特殊なタイプのセット、関数、およびシンボルタイプ

 <script src="./js/is_object.js"></script>
  <script>
    // 深拷贝函数
    function deepCopy(originValue) {
      // 0.如果值是Symbol的类型
      if (typeof originValue === "symbol") {
        return Symbol(originValue.description)
      }

      // 1.如果是原始类型, 直接返回
      if (!isObject(originValue)) {
        return originValue
      }

      // 2.如果是set类型
      if (originValue instanceof Set) {
        const newSet = new Set()
        for (const setItem of originValue) {
          newSet.add(deepCopy(setItem))
        }
        return newSet
      }

      // 3.如果是函数function类型, 不需要进行深拷贝
      if (typeof originValue === "function") {
        return originValue
      }

      // 2.如果是对象类型, 才需要创建对象
      const newObj = Array.isArray(originValue) ? []: {}
      // 遍历普通的key
      for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
      }
      // 单独遍历symbol
      const symbolKeys = Object.getOwnPropertySymbols(originValue)
      for (const symbolKey of symbolKeys) {
        newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey])
      }

      return newObj
    }

    const set = new Set(["abc", "cba", "nba"])
    const s1 = Symbol("s1")
    const s2 = Symbol("s2")
    const info = {
      name: "why",
      age: 18,
      friend: {
        name: "kobe",
        address: {
          name: "洛杉矶",
          detail: "斯坦普斯中心"
        }
      },

      // 1.特殊类型: Set
      set: set,

      // 2.特性类型: function
      running: function() {
        console.log("running~")
      },

      // 3.值的特殊类型: Symbol
      symbolKey: Symbol("abc"),

      // 4.key是symbol时
      [s1]: "aaaa",
      [s2]: "bbbb"
    }

    // for (let key in info) {
    //   console.log(key)
    // }

    // const symbol = Symbol()
    // console.log(typeof symbol)
    // console.log(isObject(symbol))

    const newObj = deepCopy(info)
    console.log(newObj)

  </script>

ディープコピー - ディープコピー機能の循環参照

オブジェクト型の変数にそれ自体への参照がある場合、エラーが返され、無限ループでエラーが報告されます。

<script src="./js/is_object.js"></script>
  <script>
    // 深拷贝函数
    // let map = new WeakMap()
    function deepCopy(originValue, map = new WeakMap()) {
      // const map = new WeakMap()

      // 0.如果值是Symbol的类型
      if (typeof originValue === "symbol") {
        return Symbol(originValue.description)
      }

      // 1.如果是原始类型, 直接返回
      if (!isObject(originValue)) {
        return originValue
      }

      // 2.如果是set类型
      if (originValue instanceof Set) {
        const newSet = new Set()
        for (const setItem of originValue) {
          newSet.add(deepCopy(setItem))
        }
        return newSet
      }

      // 3.如果是函数function类型, 不需要进行深拷贝
      if (typeof originValue === "function") {
        return originValue
      }

      // 4.如果是对象类型, 才需要创建对象
      if (map.get(originValue)) {
        return map.get(originValue)
      }
      const newObj = Array.isArray(originValue) ? []: {}
      map.set(originValue, newObj)
      // 遍历普通的key
      for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key], map);
      }
      // 单独遍历symbol
      const symbolKeys = Object.getOwnPropertySymbols(originValue)
      for (const symbolKey of symbolKeys) {
        newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map)
      }

      return newObj
    }

    const info = {
      name: "why",
      age: 18,
      friend: {
        name: "kobe",
        address: {
          name: "洛杉矶",
          detail: "斯坦普斯中心"
        }
      },
      // self: info
    }
    info.self = info

    let newObj = deepCopy(info)
    console.log(newObj)
    console.log(newObj.self === newObj)


    // mitt
  </script>

イベントバス - イベントバスの実装

ファイルとコンポーネント間の通信の使用状況。

<body>

  <button class="nav-btn">nav button</button>
  
  <script>

    // 类EventBus -> 事件总线对象
    class HYEventBus {
      constructor() {
        this.eventMap = {}
      }

      on(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) {
          eventFns = []
          this.eventMap[eventName] = eventFns
        }
        eventFns.push(eventFn)
      }
      
      off(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        for (let i = 0; i < eventFns.length; i++) {
          const fn = eventFns[i]
          if (fn === eventFn) {
            eventFns.splice(i, 1)
            break
          }
        }

        // 如果eventFns已经清空了
        if (eventFns.length === 0) {
          delete this.eventMap[eventName]
        }
      }

      emit(eventName, ...args) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        eventFns.forEach(fn => {
          fn(...args)
        })
      }
    }


    // 使用过程
    const eventBus = new HYEventBus()

    // aside.vue组件中监听事件
    eventBus.on("navclick", (name, age, height) => {
      console.log("navclick listener 01", name, age, height)
    })

    const click =  () => {
      console.log("navclick listener 02")
    }
    eventBus.on("navclick", click)

    setTimeout(() => {
      eventBus.off("navclick", click)
    }, 5000);

    eventBus.on("asideclick", () => {
      console.log("asideclick listener")
    })


    // nav.vue
    const navBtnEl = document.querySelector(".nav-btn")
    navBtnEl.onclick = function() {
      console.log("自己监听到")
      eventBus.emit("navclick", "why", 18, 1.88)
    }

  </script>

</body>