区别：

函数节流是指一定时间内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>

# javascript # 前端 # vue.js
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间
cover

GaussDB全密态数据库等值查询

avatar 华为开发者空间
cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间