总结前端函数防抖与函数节流

最新推荐文章于 2024-02-26 16:56:39 发布

zzh1918

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量7.2k

点赞数 5

分类专栏： javascript 文章标签：函数节流和函数防抖事件优化

本文链接：https://blog.csdn.net/qq_37860930/article/details/83505547

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

函数防抖与函数节流的意义

在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。

简单的讲就是事件触发太频繁，浏览器来不及处理，导致页面出现卡顿。

函数防抖

规定函数至少间隔多久执行。

函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行
下一次函数调用将清除上一次的定时器，并用setTimeout重新计时

例子	未使用函数防抖	使用函数防抖
当窗口大小发生变化时计算新的窗口大小	窗口大小改变就计算大小	窗口大小改变完成后计算大小
验证用户输入	用户每输入一个字符就进行验证	用户输入完成后进行验证

上面例子中如何判断窗口大小改变完成和用户输入完成？
其实就是利用的时间间隔。当事件触发时间间隔很短时，就认为用户操作还未完成，推迟事件处理程序的执行。

<input type="text" id="input">
<script>
    // 简单的防抖动函数
    function debounce(func, wait) {
        let timeout;  // 定时器变量
        return function() {
            clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
            timeout = setTimeout(func, wait);  // 指定 xx ms 后触发真正想进行的操作 handler
        };
    }
    //事件处理程序
    function realFunc(){
        console.log("Success");
    }

    const input = document.getElementById('input');
    input.addEventListener('keydown',debounce(realFunc,500));
    //input.addEventListener('keydown',realFunc);
</script>

对比一下效果很明显

函数节流

规定函数在某时间段内最多执行一次

函数在n秒内最多执行一次
下一次函数调用将清除上一次的定时器
- 若函数执行的时间间隔小于等于规定时间间隔则用setTimeout在规定时间后再执行
- 若函数执行的时间间隔大于规定时间间隔则执行函数，并重新计时

例子	未使用函数节流	使用函数节流
页面滚动图片懒加载	每次都会执行事件处理程序	指定事件处理程序的执行频率

<script>
    //节流函数
    function throttle(func,interval){
        let timeout;
        let startTime = new Date();
        return function (){
            clearTimeout(timeout);
            let curTime = new Date();
            if(curTime - startTime <= interval){
                //小于规定时间间隔时，用setTimeout在指定时间后再执行
                timeout = setTimeout(()=>{
                    func();
                },interval)
            } else {
                //重新计时并执行函数
                startTime = curTime;
                func()
            }
        }
    }
    //事件处理程序
    function realFunc(){
        console.log('success')
    }
    window.addEventListener('scroll',throttle(realFunc,100));
    //window.addEventListener('scroll',realFunc);
</script>