防抖函数&节流函数

谁践踏了优雅 2022-12-26 09:22 127阅读 0赞

##### 防抖函数 #####

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

//防抖函数
    const debounce = function (func, delay, immediately = false) { 
        let timer = null
        if (immediately) {   //立即执行操作
            return function (...args) { 
                if (timer) clearTimeout(timer);
                let callNow = !timer;
                timer = setTimeout(() => { 
                    timer = null
                }, delay)
                if (callNow) func.apply(this, args)
            }
        } else {   //delay时间后执行操作
            return function (...args) { 
                if (timer) clearTimeout(timer)
                timer = setTimeout(() => { 
                    func.apply(this, args)
                }, delay)
            }
        }
    }

##### 节流函数 #####

节流函数的作用是在某一段时间内函数只执行一次，它能控制函数的**执行频率**。

//节流函数
    const throttle = function (func, delay) { 
        let timer = null
        return function (...args) { 
            if (!timer) { 
                timer = setTimeout(() => { 
                    timer = null
                    func.apply(this, args)
                }, delay)
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

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

相关阅读

相关函数节流与函数防抖的区别

数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案，但是经常傻傻分不清楚。。。这不，在项目中又用遇到了，在此处记录一下函数防抖 debounce *...

àì夳堔傛蜴生んèń/ 2024年04月18日 10:08/ 0 赞/ 13 阅读

相关节流防抖函数（Marksheng）

使用节流防抖函数(性能优化) 那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法 // 防抖 expo

蔚落/ 2022年12月27日 01:44/ 0 赞/ 186 阅读

相关防抖函数&节流函数

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

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

相关简单节流防抖函数

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

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

相关 JS_js实现防抖节流函数

实现防抖函数防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 // func是用户传入需要防抖的函数 // wait是等

我不是女神ヾ/ 2022年11月19日 07:45/ 0 赞/ 149 阅读

相关防抖(debouncing)函数与节流(throttling)函数

> JS中的防抖(debouncing)与节流(throttling)是用来控制一个函数在一定时间内执行的次数(频次)，他俩个用处相近、但又不完全相同。注：文章中的示例可

怼烎@/ 2022年10月01日 09:55/ 0 赞/ 165 阅读

相关函数节流和函数防抖

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

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

相关函数节流-防抖函数

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

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

相关函数节流和函数防抖

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

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

相关函数节流与防抖实现

问题引出：什么是函数节流？什么是函数防抖？ 1. 函数节流函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。函数节流限制一个函数在一定时间内

不念不忘少年蓝@/ 2021年11月10日 20:22/ 0 赞/ 311 阅读