fuxi_107
/
防抖和节流.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="height: 10000px; background-color: aquamarine">
    <button class="btn">登录</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <script>
      // 防抖和节流的作用：
      // 防抖：例如一个登录按钮连续点击，为了防止执行多次事件，需要使用防抖， 还有输入框里面输入文字，触发change事件也需要防抖。单位事件内只执行最后一次
      // 节流：节约流量 流速的意思。 例如滚动条滚动事件，我们想100ms以内执行一下回调函数，这个时候就需要节流。单位时间内只执行一次
      // 工作里面一般使用lodash-es包，
      // lodash里面有两个函数 debounce  throttle
      // https://www.bootcdn.cn/ 这个网站储存了很多在线的包，不用下载下来，直接用在线连接更快

      document.querySelector('.btn').addEventListener(
        'click',
        // 单位时间内只执行最后一次
        _.debounce(() => {
          console.log('发登录请求');
        }, 300)
      );

      window.addEventListener(
        'scroll',
        // 单位时间内只执行一次
        _.throttle(() => {
          console.log(11111111);
        }, 500)
      );

      console.log(_);
    </script>
  </body>
</html>