06.js防抖与节流

最新推荐文章于 2024-08-27 13:38:21 发布

HdLmj

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量66

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52563089/article/details/129742914

版权

文章介绍了JavaScript中两种性能优化技术——防抖函数(fangdou)和节流函数(jieliu)的实现方法。防抖函数通过限制函数的频繁执行，确保在特定延迟后只执行一次；而节流函数则保证在固定间隔内只执行一次，防止过度调用。两者都利用了setTimeout来控制函数的执行时机。

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

    // 防抖函数
    function fangdou(fn,delay){
        // 1.设置的定时器为null
        let timer = null;
        return function(){
            // 3.如果定时器不为空则说明已经执行了防抖函数，那么就清空定时器
            if(timer){
                clearTimeout(timer)
            }
            // 2.
            // 触发事件就执行定时器，在规定的时间后内执行要防抖的函数
            // 如果此时在该定时器还没结束的时候，又执行了一次函数，那么就还得再执行一次定时器，
            // 此时就会多次执行定时器，也就会多次执行要防抖的函数,就达不到防抖的目的了，
            // 所以当再次触发事件时，就要执行第3步的清空定时器，让定时器重新计时
            // 时间过了，再执行要防抖的函数,从而达到只执行一次定时器的目的
            timer = setTimeout(() => {
                // 4.执行要防抖的函数并改变this指向
                fn.call(this)
            },delay)
        }
    }
    
    // 节流函数
    function jieliu(fn,delay){
        // 1.设置一个参数为真
        let flag = true;
        return function(){
            // 如果参数为真就执行定时器
            if(flag){
                setTimeout(() => {
                    // 执行节流函数并执行this
                    fn.call(this);
                    // 3.将参数flag改为true，即在执行完毕这一次的定时器，才能开启下一次的定时器
                    // 也就是在规定的时间内只能执行一次节流函数
                    flag = true;
                },delay)
            }
            // 2.定时器执行完毕，将falg改为false，当再次执行该函数时，
            //  就不再执行定时器里面的节流函数，就执行一次定时器
            flag = false
        }
    }