浅谈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("它在跑")

        }
        

区别：

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

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

浅谈js防抖和节流的相关教程结束。