防抖和节流

米朵家的博客

已于 2024-02-28 20:23:29 修改

阅读量399

点赞数 3

文章标签：前端 javascript html

于 2024-02-28 20:20:11 首次发布

本文链接：https://blog.youkuaiyun.com/WZH15075051915/article/details/136354243

版权

一，防抖，

原理：在事件触发后，设置一个定时器，如果在设定的时间间隔内事件再次触发，就会取消之前的定时器并重新设置一个新的定时器。只有当在设定的时间间隔内没有事件触发时，定时器触发时才会执行事件处理函数。

应用场景：
1. 搜索框实时搜索：避免频繁触发搜索请求，只在用户停止输入一段时间后发送请求。
2. 窗口大小调整：确保在用户完成调整后进行布局计算，提高性能。

<body>
    <input type="text" id="inp">
    <script>
        //封装防抖函数
        function fangdo(fn,time) {
            let timeout=null;
            return function () {
                clearTimeout(timeout)
                timeout=setTimeout(()=>{
                    fn()
                },time)
            }
        }
        //获取input元素
        var inp=document.getElementById('inp');
        function sayHi() {
            console.log('防抖');
        }
        //给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件
        inp.addEventListener('input',fangdo(sayHi,5000))
    </script>
</body>

二，节流，

原理：在一定时间内，无论事件触发多少次，只会执行一次事件处理函数。通过记录上次事件处理函数的执行时间戳，在事件触发时与当前时间戳进行比较，如果时间间隔超过设定的阈值，就执行事件处理函数。
应用场景：
1. 页面滚动加载：控制数据的加载速度，提升用户体验。
2. 按钮防重复点击：防止多次点击造成误操作。

<script>
        //封装节流函数
        function jieliu(fn,time) {
            //闭包保存一个‘节流阀’
            let temp= false;
            return function(){
                if (temp) {
                    return
                }else {
                    temp=true;
                    setTimeout(() => {
                        fn.apply(this,arguments);
                        temp=false;
                    }, time);
                }
            }
        }
        function sayHi(e){
            //打印document的宽高
            console.log(e.target.innerHeight,e.target.innerWidth);
        }
        //绑定事件 调用节流函数
        window.addEventListener('resize',jieliu(sayHi,2000))
    </script>

节流(throttle)和防抖(debounce)是两种常用的浏览器事件处理方法。

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

相同点：

1，都是为了减少事件触发频率，优化性能。
不同点：

1，节流是指在一段时间内最多触发一次事件，节流算法会在特定的时间间隔内判断是否触发事件；
2，防抖是指在一段时间内只要有事件触发，就重新计算时间，直到这段时间内没有事件触发，才真正的执行事件；
3，节流适用于持续的触发，防抖适用于短时间内的大量触发。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.youkuaiyun.com/qq_36362721/article/details/128927798