前言

高频率触发事件，onscroll / onresize 是高频率触发事件，还有比如疯狂点击，点击事件频繁的触发等事件一直容易被触发，造成很大的性能问题。

什么是防抖和节流

函数防抖(debounce)： 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 --- 每次点击，点了以后立即清除定时器

函数节流(throttle)： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 --- 点击一次，就把事情干完，没干完之前点击没用

举个栗子

函数防抖

//body的高度设置多些，能够触发onsroll事件
   var t;
        window.onscroll = function() {
            clearTimeout(t);
            t = setTimeout(function() {
                console.log(888);
            }, 300)
        }

结果如下分析 : 没有函数防抖的话，那么触发一下滚动条滑动事件，打印888将会打印非常多，防抖之后，可以看打印的数量少之又少

函数节流

一个常见的例子，在获取验证码的时候，一般都是60s之后可以重新获取，在那期间，获取验证码按钮是不可以点击的。所以肯定要用带表单里面的禁用属性disable，值为布尔值（注意： 点击事件频繁触发，点击事件是叠加的）

 <button id="btn">获取验证码</button>
    <script>
        //函数节流，事件处理完了才能进行下一件
        var oBtn = document.getElementById('btn')
        
         //点击事件
        oBtn.onclick = function() {
            //disabled为禁用
            oBtn.disabled = true;
            oBtn.style = "background:#666;"
            var count = 10;
            oBtn.innerHTML = count + 's后可重新获取'

            //定时器
            var t = setInterval(function() {
                count--;
                oBtn.innerHTML = count + 's后可重新获取'
                if (count <= 0) {
                    //条件满足后，清除定时器
                    clearInterval(t);
                    oBtn.innerHTML = '获取验证码'
                    oBtn.disabled = false;
                    oBtn.style = "background:#E5E5E5;"
                }
            }, 1000)
        }
    </script>

结果如下 ：此时按钮已经被禁用，定时器结束后才能再次触发点击事件，从而降低了事件触发的频率，可解决高频率触发事件。