DOM--防抖和节流

最新推荐文章于 2024-05-17 13:52:13 发布

小狐狸ya

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量150

点赞数

分类专栏： DOM 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_56607109/article/details/126659359

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

- 8、防抖和节流（重点）
- - - 1、事件的防抖
    - 2、事件的节流

8、防抖和节流（重点）

高频触发的业务：抽奖登录网络加载等需要做防抖或者节流操作。

前端开发过程中，我们经常会遇到要绑定一些持续触发的事件，如 onresize、onscroll、onmousemove 等，但不希望在事件持续触发的过程中非常频繁地执行函数。

1、事件的防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间(初始化规定时间)，连续触发只会执行最后一次。

简单理解就是：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

例子：

<style>
    div {
        width: 150px;
        height: 150px;
        color: #fff;
        background: pink;
    }
</style>
</head>

<body>
<div class="div1">每次点我,一秒后打印6</div>


<script>
    document.querySelector('.div1').onclick = debounce(1000);
    //闭包  延时器解决
    function debounce(a) {
        let timer;
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                console.log(6)
            }, a);
        }
    }
</script>

2、事件的节流

触发事件后在 n 秒内函数只能执行一次，但不会重新计算函数执行时间，即可以连续触发。

例子：

<style>
    div {
        width: 150px;
        height: 150px;
        color: #fff;
        background: pink;
    }
</style>
</head>

<body>
<div class="div2"></div>


<script>
    document.querySelector('.div2').onclick = bbb;
    //设置flag开关  1秒间隔执行一次
    var flag = true;

    function bbb() {
        if (flag) {
            flag = false;
            setTimeout(function () {
                flag = true;
            }, 1000)
            console.log(666);
        }
    }
</script>