什么是JS防抖与节流？

先给大家说一下，防抖与节流的两个概念。
1、防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。

节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

2、区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

防抖：

<input type="text">
    <script>
        var ipt = document.getElementsByTagName('input')[0];
        ipt.oninput = debounce(1000,test);
        
        // 封装防抖
        function debounce(time,hanlder){
            // 当触发事件之后 等待一段时间后再触发
            var timer = null;
            return function(){
                clearTimeout(timer);
                var self = this;
                timer = setTimeout(function(){
                    hanlder();
                },time);
            }
        }


        function test(){
            console.log(ipt.value);
        }



    </script>

当我在输入框内输入任意字符时，控制台不会立即输出我所输入的每一个字符，而是在我停止输入后，规定时间后控制台才会输出输入框的内容。

节流：

<div>0</div>
    <button>节流</button>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var div = document.getElementsByTagName('div')[0];
        // 节流处理
        btn.onclick = thorttle(1000,test);


        function test(){
            // 让div的内容进行累加
            div.innerHTML = Number(div.innerHTML) + 1
        }

        
        function thorttle(time,hanlder){
            var lastTime = 0;
            // 记录每一次点击的时间，判断两次点击之间的间隔时间 >= 1000ms
            return function(){
                var nowTime = new Date().getTime();
                if(nowTime - lastTime >= time){
                    // 让div的内容+1
                    // 让btn的点击事件在一秒内 只能执行一次
                    hanlder();
                    lastTime = nowTime;
                }
            }

        }
    </script>

当我在1s内多次点击按钮，数字也只会加1。

以上就是防抖与节流的区别，但是更多的是希望大家自己动手去试一下这俩者的区别，才能更好的去理解，并加深记忆。