节流防抖是什么

防抖
所谓防抖，就是指触发事件后在 n秒内函数只能执行一次，如果在 n秒内再去触发这个事件，则会被重新计算函数执行时间

代码

//定义一个input
<input type="text" id="input">
    <script>
         // 将会包装事件的 debounce 函数
        function debounce(fn, delay) {
           // 利用闭包保存定时器
            let timer = null;
            return function () {
                // 在规定时间内再次触发会先清除定时器后再重设定时器
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                }, delay)
            }
        }
        let index = 0;
        document.all.input.oninput = debounce(e => {
            console.log(e);
            console.log(++index)
        }, 500)
    </script>

节流
所谓节流，就是指连续触发事件但是在 n秒 中只执行一次函数。

代码

 <input type="text" id="input1">
  <script>
  	function throttle(handler,wait){  
        //handler是要进行节流的函数，wait是等待时间
        var lastTime = 0;
        return function(){
            var nowTime = new Date().getTime();    //获取当前时间
                if(nowTime - lastTime > wait){
                    handler.apply(this,arguments);
                    lastTime = nowTime;      //更新最后时间
                }
          }
    }
    document.all.input1.oninput = throttle(e=>{
        console.log(e)   
    },500)
  </script>