js高频发事件的处理：防抖、节流

最新推荐文章于 2023-03-31 16:58:54 发布

HaiRong_21

最新推荐文章于 2023-03-31 16:58:54 发布

阅读量264

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/HaiRong_21/article/details/108513730

版权

（先设置一个点击的盒子）

<style>
        .mydiv {
            width: 100px;
            height: 100px;
            background-color: rgb(233, 131, 131);
        }
    </style>
</head>

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

防抖：
防抖思想：如果高频法，设置一个定时器，如果在这个时间内如果再次触发事件，
就清除前一次事件的时间，以后面一次的时间再重新计时，直到在定时器设置的时间内没有再触发事件，那么定时器才会执行事件。
(如果一直触发，就不会执行，只要等到指定时间内没有再触发事件了，才会执行)

    let mydiv = document.querySelector('.mydiv');
    mydiv.addEventListener('mousemove', move(fn,500))

    function move(f,time) {
        let tid=0;
        return function(){
            if(tid){
                clearTimeout(tid)
            }

            tid=setTimeout(function(){
            f()
        },time)   
        }
        
    }
    function fn() {
        console.log('1')
    }

节流
节流思想：如果高频发，那么在规定时间内，就只会执行一次。
(如果一直触发，那么在规定的时间内，只会执行一次，不管触发多少次，规定时间只会执行一次)

       let mydiv = document.querySelector('.mydiv');
        mydiv.addEventListener('mousemove', move(fn, 1000))

        function move(f, time) {
            let working = false;

            return function () {
                if (working) {
                    return;
                }
                working=true;
                setTimeout(function () {
                    f()
                    working=false;
                }, time)
            }
        }
        function fn() {
            console.log('鼠标滑动')
        }

HaiRong_21

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高频发事件的处理：防抖、节流

思路：设置定时器，在自设置的时间内，高频发的事件只执行一次。<style> .mydiv { width: 100px; height: 100px; background-color: rgb(233, 131, 131); } </style></head><body> <div class="mydiv"></
复制链接

扫一扫