五、防抖函数（2021/4/24）

最新推荐文章于 2022-07-04 16:22:47 发布

叶川飞流

最新推荐文章于 2022-07-04 16:22:47 发布

阅读量80

点赞数

分类专栏：前端js面试题集锦记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116111446

版权

前端js面试题集锦记录专栏收录该内容

36 篇文章 2 订阅

订阅专栏

通过闭包来实现防抖的效果

<body>
        <input type="text" id="input">
        <script>
                function debounce(delay,callback){
                        let timer;
                        return function(value){
                                clearTimeout(timer);
                                // 我们想清除的是setTimeout我们应该存储这个timer的变量timer变量
                                // 需要一直保存在内存当中
                                // 既然你不想打印之前已经输入的结果 清除以前触发的定时器
                                // 我们应该存储这个timer的变量
                                // 一直要在内存当中 内存的泄露 闭包
                                timer = setTimeout(() => {
                                        //  console.log(value);
                                        callback(value);//输出了结果 想要在外面输出不在里面输出
                                }, delay);
                        }
                }
                function fn(value){
                        console.log(value);
                }
                var debounceFunc = debounce(1000,fn);
                var input = document.getElementById('input');
                input.addEventListener('keyup',function(e){
                        debounceFunc(e.target.value);
                })
        </script>
</body>

实际应用场景

使用echarts时，改变浏览器宽度的时候，希望重新渲染echarts的图像，可以使用此函数，提升性能。(虽然echarts里有自带的resize函数)
典型的案例就是输入搜索∶输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。解决搜索的bug

叶川飞流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、防抖函数（2021/4/24）

通过闭包来实现防抖的效果function debounce(delay,callback){ let timer; return function(value){ clearTimeout(timer); // 我们想清除的是setTimeout我们应该存储这个timer的变量timer变量 // 需要一直保存在内存当中 // 既然你不想打印之.
复制链接

扫一扫

专栏目录