节流和防抖函数的封装_ts 封装防抖节流函数-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51445423/article/details/124493275

本文详细介绍了如何在JavaScript中使用防抖（debounce）和节流（throttle）技术，包括基本实现方式、闭包封装示例，并提供了防抖和节流函数的实用封装。通过实例展示，理解如何控制高频事件频率，确保用户输入的稳定处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

防抖

用户触发事件过于频繁，只要最后一次事件的操作

<body>
    <input type="text" id="input">
    <script>
        const inp = document.querySelector('#input');
        inp.oninput = function(){
            console.log(this.value);
        }
    </script>
</body>

需求就是过滤掉过于频繁的操作，只要最后的结果
利用计时器实现防抖

<body>
    <input type="text" id="input">
    <script>
        const inp = document.querySelector('#input');
        let t = null;
        inp.oninput = function(){
            // 
            if(t !== null){
                clearTimeout(t);
            }
            t= setTimeout(()=>{
                console.log(this.value);
            },500)
        }
    </script>
</body>

使用闭包封装防抖函数

<body>
    <input type="text" id="input">
    <script>
        const inp = document.querySelector('#input');
        inp.oninput = debource(function(){
            // 业务逻辑
            console.log(this.value);
        },500);
        function debource(fn,delay){
            let t = null;
            return function(){
                if(t !== null){
                    clearTimeout(t);
                }
                t= setTimeout(()=>{
                    fn.call(this);
                },delay)
            }
        }    
    </script>
</body>

节流

控制高频事件的执行次数

节流函数的封装

<script>
    window.onscroll = throttle(function(){
        console.log('gogogo');
    },500);
    function throttle(fn,delay){
        let flag = true;
        return function(){
        if(flag){
            setTimeout(()=>{
                fn.call(this)
                flag = true;
            },delay)
        }
        flag = false;
    }
    }
</script>