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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37860930/article/details/83505547

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

在绑定 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>

函数防抖与函数节流的对比

首先明确一点:不管是函数节流还是函数防抖,我们减少的是事件处理程序的调用频率(上面列子的realFunc函数),而不是事件的调用频率。每次滚动、每次输入都会触发事件。
函数防抖和函数节流都用了闭包封装

何时使用函数防抖、何时使用函数节流看需求:

  • 当我们只需要处理最后一次触发事件时,用函数防抖。如窗口大小值变化时并不需要计算中间变化的过程,只需要窗口大小改变完成后的值
  • 当事件触发过于频繁,我们需要限制事件处理程序的调用频率时,用函数节流。举个例子:

在这里插入图片描述

我在做微信小程序的城市选择页面时,页面滚动、侧边滑动显示当前的字母索引。若不进行函数节流,函数触发太快,上一次计算还没完成又触发下一次计算,导致页面卡顿。使用函数节流后可以限制复杂操作的频率。

传递事件对象

当我们用节流函数或防抖函数封装事件处理程序时,要注意两个问题:

  • 事件对象的传递
  • this的指向

关于事件对象的传递可以参考这里
this的指向可以利用箭头函数或者call来绑定。
上面编写的节流函数和防抖函数只为了简述原理,网上有已经封装好的节流函数和防抖函数。

在前端框架中使用防抖函数和节流函数

在React、Vue和小程序中使用函数节流和函数防抖


参考链接:【前端性能】高性能滚动 scroll 及页面渲染优化函数防抖

展开阅读全文

没有更多推荐了,返回首页