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

待我称王封你为后i 2023-01-16 09:37 31阅读 0赞

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

<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 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

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

> 通过闭包来实现防抖的效果 <body> <input type="text" id="input"> <scrip

待我称王封你为后i/ 2023年01月16日 09:37/ 0 赞/ 32 阅读

相关防抖函数&节流函数

防抖函数能够控制某个方法的执行次数。如果一个方法在一定时间内的执行次数过多而我们并不需要这个方法执行很多次，我们就可以使用防抖函数来减少函数的执行次数。 //

谁践踏了优雅/ 2022年12月26日 09:22/ 0 赞/ 181 阅读

相关简单节流防抖函数

export default (func, threshold = 500, immediate = false) => { if (typeof fun

╰+哭是因爲堅強的太久メ/ 2022年12月02日 15:09/ 0 赞/ 212 阅读

相关 react hooks 防抖函数

防抖的意思就是用户输入的时候不会频繁请求接口，一旦用户停下来在设定的时间内都没有再输入，那就可以发送请求，所以这样就减少了请求防抖这个用hooks有点小麻烦，主要是要获取i

系统管理员/ 2022年11月24日 14:29/ 0 赞/ 162 阅读

相关函数防抖

概念函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间函数节流（throttle）预先设定一个执行周

- 日理万妓/ 2022年10月01日 08:46/ 0 赞/ 201 阅读

相关 js函数防抖

上代码，自己测试。防抖简单说就是减少http请求，前端性能优化 <!DOCTYPE html> <html> <head> <met

小咪咪/ 2022年09月16日 04:54/ 0 赞/ 206 阅读

相关 JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景： 1. 实时搜索 2. 拖拽当输完nba之

墨蓝/ 2022年05月23日 07:24/ 0 赞/ 215 阅读

相关函数节流和函数防抖

函数节流的概念:当一个动作连续触发，则只执行最后一次函数防抖的概念:控制一个动作在多长时间内执行一次函数节流的使用场景：用户提交表单函数防抖的使用场景：scr

超、凢脫俗/ 2021年12月24日 00:05/ 0 赞/ 316 阅读

相关函数节流-防抖函数

函数节流一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行情景：监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时

太过爱你忘了你带给我的痛/ 2021年12月20日 08:55/ 0 赞/ 355 阅读

相关函数节流和函数防抖

[https://blog.csdn.net/qq\_40421277/article/details/87990882][https_blog.csdn.net_qq_404

た入场券/ 2021年11月19日 11:52/ 0 赞/ 343 阅读