JavaScript 前端性能优化之事件节流

定义： 当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器.

应用场景：

• 鼠标不断点击触发，点击事件在规定时间内只触发一次(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
• 拖拽时的mousemove事件

实现方式：一种是使用时间戳，另外一种使用定时器的方式。

使用时间戳

首先采用时间戳的方式实现：具体思路，当触发事件的时候，取出当前时间戳，然后减去之前的时间戳（第一次默认为0），如果大于设置的时间周期（单位毫秒），就执行函数并且更新时间戳为当前时间戳，如果小于则不执行函数

function throttle(fun,wait){
    let previous = 0;
    let content,args;
    return function(){
        content = this;
        args = arguments;
        let now = +new Date();  //获取当前时间戳
        if(now-previous>wait){  
            fun.apply(content,args);
            previous = now;
        }
    }
}
复制代码

使用定时器

当触发事件的时候，先设置一个定时器，再次触发事件的时候判断定时器是否存在，如果存在就不执行事件，直到定时器执行完之后执行函数，并且清空定时器

function throttle(fun,wait){
    let timer;
    return function(){
        let content = this;
        let args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                timer = null;
                fun.apply(content,args);
            },wait)
        }
    }
}
复制代码

比较这两种方法：

• 采用时间戳的方式：事件会立即执行，而定时器方式事件会在n秒之后第一次执行
• 采用时间戳的方式：事件停止触发以后没有办法再次执行函数，而定时器方式事件停止触发后依旧会再执行一次函数