浅谈js防抖和节流

防抖和节流是处理高频触发最常见的优化方式，对性能提升有很大的帮助。

防抖：将多次的高频操作优化为只在最后一次执行，应用场景如：输入框，只需在最后一次输入进行校验即可。

节流：保证每隔一段时间只执行一次，降低触发的频率，将高频操作优化成低频操作。应用场景如：添加表单、滚动条事件、resize事件等高频监听事件。

 

防抖的代码：

 <input placeholder="请输入手机号" />

    <script>
        // 获取input对象
        let inp = document.querySelector('input');
        // 监听input值的变化
        inp.addEventListener('input', antiShake(animal, 2000))
        // 封装防抖方法
        function antiShake(fn, wait){ // fn：执行的函数，wait：设置的时间
            let timeSet = null;
            return args => {
                if(timeSet) clearTimeout(timeSet)
                timeSet =  setTimeout(fn, wait);
            }
        }
        function animal(){
            console.log("一条小狗");
        }
    </script>

       <style>
        .box {
           width: 200px;
           height: 200px;
           background-color: greenyellow;
        }
    </style>
   // 鼠标按住移动触发事件
    <div class="box"></div>
  let box = document.querySelector('.box');
        box.addEventListener("touchmove", throttle(run, 2000))

        function throttle(fn, wait) {
            let timer = null;
            return args => {
                if(!timer) {
                    timer = setTimeout(() => {
                        fn();
                        // 将timer释放
                        timer = null;
                    }, wait)
                }
            }
        }
        function run () {
            console.log("它在跑")
        }
        

区别：

防抖：在固定的时间内，时间只允许发生一次

节流：在一定的时间内，多个操作合并为一个，就比如：将水龙头的水流放小了一样