第 47 题:什么是防抖和节流?

Posted Noxus丶SJ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第 47 题:什么是防抖和节流?相关的知识,希望对你有一定的参考价值。

防抖

触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间

<script>
export default {
    data() {
        return {
            timer: null
        };
    },
    methods: {
        click() {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
                console.log(\'鼠标单击\');
            }, 200);
        }
    }
};
</script>

节流

在单位时间内, 只会触发一次事件,如果事件触发后,又重复触发了同一事件,则忽略后面触发的事件,直到第一次事件的计时结束

<script>
export default {
    data() {
        return {
            isFinshed: true
        };
    },
    methods: {
        click() {
            if (this.isFinshed === true) {
                this.isFinshed = false;

                this.timer = setTimeout(() => {
                    console.log(\'鼠标单击\');
                    this.isFinshed = true;
                }, 200);
            }
        }
    }
};

文章的内容/灵感都从下方内容中借鉴

以上是关于第 47 题:什么是防抖和节流?的主要内容,如果未能解决你的问题,请参考以下文章

什么是防抖和节流?有什么区别?如何实现?

3什么是防抖和节流?有什么区别?如何实现?

ajax基础5--防抖和节流

JS篇(防抖/节流)

lodash的防抖和节流方法

来聊聊JavaScript中的防抖和节流