关于防抖和节流

1.防抖

html代码

       经过测试这种直接绑定的方法无法使用
    <div class="aaa" onclick="debounce(handle,1000)"></div>
需要获取这个节点 通过js来添加点击事件
    <div class="aaa" id="debounce"></div>

   window.onload = function() {
      // 获取这个按钮，并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(handle));
    }

    function handle() {   
      console.log(Math.random())
    }
      function debounce(fn) {
      // 创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 然后创建一个新的 setTimeout，
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.call(this, arguments);
        }, 1000);
      };
    }

2.节流

html代码

和防抖一样的问题
 <div class="aaa" onclick="throttle(handle)">节流1</div>
    <div class="aaa" id="throttle">节流2</div>

 document.getElementById("throttle").addEventListener("click", throttle(handle))

 function throttle(fn) {
        // 通过闭包保存一个标记
        console.log("节流")
        let canRun = true;
        return function () {
            // 在函数开头判断标志是否为 true，不为 true 则中断函数
            if (!canRun) {
                return;
            }
            // 将 canRun 设置为 false，防止执行之前再被执行
            canRun = false;
            // 定时器
            setTimeout(() => {
                fn.call(this, arguments);
                // 执行完事件之后，重新将这个标志设置为 true
                canRun = true;
            }, 1000);
        };
    }

3.另一种测试

    <div class="aaa" onclick="ceshi(1)">测试防抖</div>
    <div class="aaa" onclick="ceshi(2)">测试节流</div>


  function ceshi(num) {
        if (num == 1) {
            debounce(handle)
        }
        else {
            throttle(handle)
        }
    }

多种写法都试过了一遍发现点击事件还是要用js代码添加才能使用

一:绑定在标签中：

能够一眼看出那些元素绑定了什么事件。

只能将元素和事件逐一实现绑定。

二js动态绑定：

可以一次动态的给多个元素绑定事件，批量绑定事件。

html标签绑定的缺点：

①：可能有时间差。如果js代码在html标签之后，用户激活事件时，事件如果还没有被解析，则会引起报错。（一般用try,catch解决，这样错误便不会付出水面。）。

②：不同浏览器在解析事件的作用域链接时可能产生不同的结果。

③：html和js文件的耦合度过高，不利于维护，修改脚本的时候还得修改html文件。

标签绑定不符合行为和事件分离原则，js文件和html文件应该尽量松散耦合
来自：
https://www.cnblogs.com/lihongfei0602/p/4060042.html