防抖和节流的实现

// 1.防抖:防止抖动, 比如游戏回城,点击回城,再次点击重新计算回城时间

      // 在一定的时间内触发,在次触发重新计数

      // 应用场景: 避免表单事件重复提交

      function debounce(fun, time, ...a) {

        let timer = null;

        return function () {

          console.log(this, 222); //时间源

          if (timer !== null) {

            // 有

            clearTimeout(timer);

          }

          timer = setTimeout(fun.bind(this, a), time);

        };

      }

      function myfun(res) {

        console.log("6666666");

        console.log(res);

      }

      let btn1 = document.querySelector(".btn1");

      btn1.addEventListener("click", debounce(myfun, 1000, "hello"));

    </script>

    <script>

      // 2.节流:

      // 在一定的时间内触发,如果再次在定义的事件内触发多次只执行最后一次

      // 应用场景: input输入框多次输入 / 页面滚动

      function Throttling(fun, time) {

        let timer = null;

        let prevTime = new Date();

        // console.log(prevTime);

        return function () {

            let nowTime = new Date();

            if(nowTime - prevTime > time){ //

                fun();

                prevTime = new Date();

            }

        };

      }

      function myfun(res) {

        console.log("6666666");

      }

      let btn2 = document.querySelector(".btn2");

      btn2.addEventListener("click", Throttling(myfun, 3000));

    </script>