防抖 

<!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>防抖函数</title>
  </head>
  <body>
    <script>
      // function debounce(func, delay, immediate) {
      //   let time;
      //   return function () {
      //     let context = this;
      //     let args = arguments;
      //     clearTimeout(time);
      //     if (immediate) {
      //       let callNow = !time;
      //       time = setTimeout(() => {
      //         time = null;
      //       }, delay);
      //       if (callNow) {
      //         func.apply(context, args);
      //       }
      //     } else {
      //       time = setTimeout(function () {
      //         func.apply(context, args);
      //       }, delay);
      //     }
      //   };
      // }

      function debounce(func, delay, immediate) {
        let timer, result;
        let debounced = function () {
          let context = this;
          let args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          if (immediate) {
            let isExecute = !timer;
            timer = setTimeout(() => {
              timer = null;
            }, delay);
            if (isExecute) {
              result = func.apply(context, args);
            }
          } else {
            timer = setTimeout(function () {
              func.apply(context, args);
            }, delay);
          }
          return result;
        };
        debounced.cancel = function () {
          clearTimeout(timer);
          timer = null;
        };
        return debounced;
      }

      let count = 0;
      let container = document.getElementById('#container');
      let btn = document.querySelector('#btn');
      function doSomeThing(e) {
        console.log(e);
        console.log(this);
        container.innerHTML = count++;
        return '想要的结果';
      }
      container.onmouseover = debounce(doSomeThing, 1000);
      let doSome = debounce(doSomeThing, 1000);
      btn.click = function () {
        doSome.cancel();
      };

      let a = `scroll事件滚动触发；搜索框输入查询；表单验证；按钮的提交事件；浏览器的窗口缩放；`;
      let b = `事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内
              没有再次调用，则执行相应逻辑；`;
    </script>
  </body>
</html>

 

posted @ 2022-05-02 18:58  苹果π  阅读(43)  评论(0)    收藏  举报