三分钟了解函数防抖

鼠标滚动（scroll）、调整窗口大小（resize）、敲击键盘（keyup）这类事件在触发时往往频率极高，这时事件对应的回调函数会反复执行，如果回调函数内包含复杂的运算逻辑或者DOM操作等，就可能造成浏览器的不流畅。而防抖和节流就是为了优化此类问题的，两者并不会减少事件的触发，而是减少事件触发时回调函数的执行次数。
下面我们就先来重点了解以下防抖吧！

防抖：事件短时间内高频次触发，但是只有在规定时间内不再触发后才执行回调
原理：防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
应用场景：

1. 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询请求，这样可以有效减少请求次数，节约请求资源；
   2.window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次
   下面直接看代码

<script>
        chengeFs()
        function chengeFs(){
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

        }
        var timer = null;
        window.onresize = function () {
            if(timer){
                clearTimeout(timer);
                timer = null;
            }
            timer = setTimeout(chengeFs,300)
        }
    </script>