前端函数防抖与函数节流总结及其使用

前言

在绑定 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秒内最多执行一次
• 下一次函数调用将清除上一次的定时器

1. 若函数执行的时间间隔小于等于规定时间间隔则用setTimeout 在规定时间后再执行
2. 若函数执行的时间间隔大于规定时间间隔则执行函数，并重新计时

<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来绑定。
上面编写的节流函数和防抖函数只为了简述原理，网上有已经封装好的节流函数和防抖函数。

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

在前端框架中的使用，一定要注意两个问题：
this的指向；
事件对象的传递

React中使用防抖函数和节流函数

在React事件调用时，React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有属性都将被取消。 这是出于性能原因。 因此，您无法以异步方式访问该事件。
React合成事件官方文档

//React无法异步访问事件对象
function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // 不能工作。 this.state.click 事件只包含空值。
  this.setState({clickEvent: event});

  // 您仍然可以导出事件属性。
  this.setState({eventType: event.type});
}

复制代码

所以在用防抖或节流函数封装时，异步方式访问事件对象出现问题。解决的方法如下：

• 方法一：调用合成事件对象的persist()方法
• 方法二：深拷贝事件对象

function debounce(func, wait=500) {
    let timeout;  // 定时器变量
    return function(event){
        clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
        event.persist && event.persist()   //保留对事件的引用
        //const event = e && {...e}   //深拷贝事件对象
        timeout = setTimeout(()=>{
            func(event)
        }, wait);  // 指定 xx ms 后触发真正想进行的操作 handler
    };
}

class Test extends React.Component{
    handleChange = debounce((e)=>{
        console.log(e.type)
        console.log(this)
    })
    render(){
        return (
            <div>
                <input type="text" onChange={this.handleChange}/>
            </div>
        )
    }
}

复制代码

在Vue中使用防抖函数和节流函数