JavaScript的函数节流和防抖的区别

JavaScript的函数节流和防抖的区别

区别:

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。

函数防抖是指频繁触发的情况下,只有足够的空间时间,才执行代码一次。比如坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

一、节流: 控制高频事件执行次数

应用场景: 多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件

 <style>
        body {
            height: 2000px;
        }
 </style>

<script>
   window.onscroll = throttle(function () {
        console.log("节流");
    }, 500)
    function throttle(fn, delay) {
        let flag = true;
        return function () {
            if (flag) {
                setTimeout(() => {
                    fn.call(this);
                    flag = true;
                }, delay);
            }
            flag = false;
        }
    }
</script>

 二、防抖:用户触发事件过于频繁,只要最后一次事件的操作

应用场景:最常见的就是用户注册时候手机号码验证等,只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹框提示。


<body>
    <input type="text">
</body>

<script>
    let inp = document.querySelector('input');
    inp.oninput = debounce(function () {
        console.log(this.value);
    }, 500)

    function debounce(fn, delay) {
        let t = null;
        return function () {
            if (t !== null) {
                clearTimeout(t);
            }
            t = setTimeout(() => {
                fn.call(this);
            }, delay)
        }
    }
</script>