lodash防抖和节流简单使用

lodash防抖和节流简单使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible

大家好,欢迎来到IT知识分享网。

<!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>
    <style>
      html {
        height: auto;
        overflow: scroll;
      }
      body {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 4rem;
      }
      div {
        width: 48%;
        overflow: hidden;
      }
    </style>
    <script src="./plugins/lodash4.17.21/lodash.min.js"></script>
    <script>
      // 一些频繁触发的事件,我们不想让它频繁执行,比如 keyup scroll resize mousemove
      // 防抖:动作执行停止后间隔一定的时间执行,应用场景: 搜索框联想
      // 节流:不管执行的频率有多高,需要间隔一定的时间执行一次,应用场景:向下滚动加载数据
      // 防抖和节流的区别:防抖:不管动作多少次,只有最后一次执行;节流:一段时间内执行多次,但人为地降低了执行的频率

      let i_left = 0;
      let i_right = 0;

      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("input-text-left").addEventListener("keyup", () => {
          i_left++;
          console.log("left第" + i_left + "");
        });
        document.getElementById("input-text-right").addEventListener(
          "keyup",
          _.debounce(function () {
            i_right++;
            console.log("right第" + i_right + "");
          }, 800)
        );

        leftBoxEl = document.getElementById("left-box");
        rightBoxEl = document.getElementById("right-box");
        document.addEventListener("scroll", () => {
          imgEl = document.createElement("img");
          imgEl.src = "./images/1.jpg";
          leftBoxEl.appendChild(imgEl);
          console.log("left共" + leftBoxEl.querySelectorAll("img").length);
        });
        document.addEventListener(
          "scroll",
          _.throttle(() => {
            imgEl = document.createElement("img");
            imgEl.src = "./images/1.jpg";
            document.getElementById("right-box").appendChild(imgEl);
            console.log("right共" + rightBoxEl.querySelectorAll("img").length);
          }, 1000)
        );
      });
    </script>
  </head>
  <body>
    <div id="left-box">
      <input type="text" id="input-text-left" />
      <img src="./images/1.jpg" />
    </div>
    <div id="right-box">
      <input type="text" id="input-text-right" />
      <img src="./images/1.jpg" />
    </div>
  </body>
</html>

 lodash防抖和节流简单使用

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/31864.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信