平时很多应用场景需要用到防抖和节流，面试时候也基本会问到，这里总结一下。

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

  • 直接上代码
<body>
    <div id='app'>
        <button class="button" @click='clickMe'>clickMe</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    //封装防抖
    function debounce(fn, wait) {
        let timer = null;
        let args = arguments;
        return function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, wait)
        }
    };
    var vue = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            clickMe: debounce(function (e) {
                var myDate = new Date();
                console.log(myDate.toLocaleTimeString())
            }, 2000)
        },
    })
</script>

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

  • 还是直接看代码
<body>
    <div id='app'>
        <button class="button" @click='clickThis'>节流</button>
    </div>
</body>
<script src="vue.js"></script>

<script>
    //节流
    function throttle(fn, wait) {
        let timer = null
        return function () {
            let args = arguments
            if (!timer) {
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(this, args)
                }, wait)
            }
        }
    }
    var vue = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            clickThis: throttle(function () {
                console.log("节流");
                var myDate = new Date();
                console.log(myDate.toLocaleTimeString())
            }, 2000)
        },
    })
</script>

总结

防抖就像游戏中的buff，你吃了bull，开始倒计时，这时候你又吃了一个buff，则重新记时。
节流就是游戏中的技能CD，你按下技能以后，再规定的时间内，你再按也没用，只能能冷却好了再按。