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

Noxus丶SJ 2021/9/15 13:04:48

防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 <script> export default {data() {return {timer: null};},methods: {click() {clearTimeout(this.timer);this.timer = setTimeout(() => {console.log(鼠标单击)…

防抖

触发高频事件后 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);
            }
        }
    }
};

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[第 47 题:什么是防抖和节流?]http://www.zyiz.net/tech/detail-228478.html

上一篇:python内置函数通过字符串的方式来执行函数代码块,类似java的反射机制相当强大!

下一篇:使用 Spring 构建 RESTful Web 服务

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程