一、初步了解函数防抖和节流

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。即：限制函数的执行次数

防抖：通过setTimeOut的方式，在一定的时间间隔内，将多次触发变为一次触发。（只执行最后一次）
节流：减少一段时间的触发频率。（控制执行次数）

二、函数防抖

1.为什么需要防抖

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover
等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函 数，尤其是执行了操作
DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低 程序运行速度，甚至造成浏览器卡死、崩溃。

2.概念与应用

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

    <input type="text" id="test"/>
     <script>
        let inp = document.getElementById('test');
        let t = null;
        inp.oninput = function(){
   
             if(t!=null){
   
                 clearTimeout(t)
             }
             t = setTimeout(