节流和防抖函数的封装

最新推荐文章于 2023-05-30 14:46:24 发布

独立寒秋-

最新推荐文章于 2023-05-30 14:46:24 发布

阅读量161

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_51445423/article/details/124493275

版权

文章目录

防抖

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

<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>

独立寒秋-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
节流和防抖函数的封装

文章目录防抖使用闭包封装防抖函数节流节流函数的封装防抖用户触发事件过于频繁，只要最后一次事件的操作<body> <input type="text" id="input"> <script> const inp = document.querySelector('#input'); inp.oninput = function(){ console.log(this.value); .
复制链接

扫一扫