防抖与节流

最新推荐文章于 2024-09-26 10:01:01 发布

Apeng_wjp

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量315

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/Apeng_wjp/article/details/121666677

版权

本文探讨了如何使用防抖和节流技术来提升JavaScript中处理高频事件（如resize、scroll、mousemove）的性能。防抖技术确保在设定的时间间隔内只执行最后一次触发的函数，而节流则保证在指定时间内只执行一次任务，从而减少资源消耗和提高应用响应速度。通过示例代码展示了防抖和节流函数的实现方法。

摘要由CSDN通过智能技术生成

一、前言

当函数绑定一些持续触发的事件如：resize、scroll、mousemove ，键盘输入，多次快速click等等，如果每次触发都要执行一次函数，会带来性能下降，资源请求太频繁等问题。由此出现防抖与节流来解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

 // 防抖： 触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行的时间
    // 触发的是指定时间内 最后一次事件

    function moveFn(e) {
        e = e || event;
        console.log('哈哈哈出发了', e.clientX, e.clientY);
    }

    //  参数 需要处理的函数   参数 控制触发时间频率
    let shakeMoveFn = AntiShake(moveFn, 100);
    document.body.onmousemove = shakeMoveFn;

    // 防抖函数 降低触发频率
    function AntiShake(fn, t) {
        // 初始化一个timer变量 为null  后期用来存定时器
        let timer = null;
        return function(e) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn(e);
            }, t)
        }
    }

节流：指定时间间隔内只会执行一次任务。

 // 前端 高频事件 scroll  mousemove  touchmove  
    // 节流：指连续触发事件但是在一段时间内只执行一次函数
    // 触发的是指定时间 内 第一次触发的事件


    function moveFn(e) {
        e = e || event;
        console.log('哈哈哈出发了', e.clientX, e.clientY);
        // 重排 重新绘制 浏览器性能开销较大 最好的方式高频降低触发频率
    }

    document.body.onmousemove = Throne(moveFn, 1000);

    function Throne(fn, t) {
        var timer = null;
        return function(e) {
            if (!timer) {
                timer = setTimeout(() => {
                    fn(e);
                    timer = null;
                }, t)
            }

        }

    }