性能优化之节流函数---throttle

时间 2019-12-12

原文原文链接

防抖函数和节流函数本质是不同的。防抖函数是将屡次执行变为最后一次执行或第一次执行，节流函数是将屡次执行变成每隔一段时间执行。javascript

节流函数

前言

防抖函数和节流函数本质是不同的。防抖函数是将屡次执行变为最后一次执行或第一次执行，节流函数是将屡次执行变成每隔一段时间执行。html

好比说，当当咱们作图片懒加载（lazyload）时，须要经过滚动位置，实时显示图片时，若是使用防抖函数，懒加载（lazyload）函数将会不断被延时，当咱们作图片懒加载（lazyload）时，须要经过滚动位置，实时显示图片时，若是使用防抖函数，懒加载（lazyload）函数将会不断被延时，只有停下来的时候才会被执行，对于这种须要周期性触发事件的状况，防抖函数就显得不是很友好了，此时就应该使用节流函数来实现了。前端

例子

<div id="container"></div>
复制代码

div{
    height: 200px;
    line-height: 200px;
    text-align: center; color: #fff;
    background-color: #444;
    font-size: 25px;
    border-radius: 3px;
}
复制代码

let count = 1;
let container = document.getElementsByTagName('div')[0];
function updateCount() {
    container.innerHTML = count ++ ;
}
container.addEventListener('mousemove',updateCount);
复制代码

咱们来看一下效果：java

咱们能够看到，鼠标从左侧滑到右侧，咱们绑定的事件执行了119次git

节流函数的实现

如今咱们来实现一个节流函数，使得鼠标移动过程当中每间隔一段时间事件触发一次。github

使用时间戳来实现节流

首先咱们想到使用时间戳计时的方式，每次事件执行时获取当前时间并进行比较判断是否执行事件。app

/** * 节流函数 * @param func 用户传入的节流函数 * @param wait 间隔的时间 */
const throttle = function (func,wait = 50) {
    let preTime = 0;
    return function (...args) {
        let now = Date.now();
        if(now - preTime >= wait){
            func.apply(this,args);
            preTime = now;
        }
    }
};
复制代码

let count = 1;
let container = document.getElementsByTagName('div')[0];
function updateCount() {
    container.innerHTML = count ++ ;
}
let action = throttle(updateCount,1000);

container.addEventListener('mousemove',action);
复制代码

此时当鼠标移入的时候，事件当即执行，在鼠标移动的过程当中，每隔1000ms事件执行一次，旦在最后鼠标中止移动后，事件不会被执行
此时会有这样的两个问题：函数

若是咱们但愿鼠标刚进入的时候不当即触发事件，此时该怎么办呢？
若是咱们但愿鼠标中止移动后，等到间隔时间到来的时候，事件依然执行，此时该怎么办呢？

使用定时器实现节流

为知足上面的需求，咱们考虑使用定时器来实现节流函数
当事件触发的时候，咱们设置一个定时器，再触发的时候，定时器存在就不执行，等到定时器执行并执行函数，清空定时器，而后接着设置定时器优化

/**
 * 节流函数
 * @param func 用户传入的节流函数
 * @param wait 间隔的时间
 */
const throttle = function (func,wait = 50) {
    let timer = null;
    return function (...args) {
        if(!timer){
            timer = setTimeout(()=>{
                func.apply(this,args);
                timer = null;
            },wait);
        }
    }
};
复制代码

使用这个定时器节流函数应用在最开始的例子上：ui

let action = throttle(updateCount,2000);

container.addEventListener('mousemove',action);
复制代码

咱们能够看到，当鼠标移入的时候，时间不会当即执行，等待2000ms后执行了一次，此后2000ms执行一次，当鼠标移除后，前一次触发事件的时间2000ms后还会触发一次事件。

比较时间戳节流与定时器节流

时间戳节流
- 开始时，事件当即执行
- 中止触发后，没有办法再执行事件
定时器节流
- 开始时，会在间隔时间后第一次执行
- 中止触发后，依然会再次执行一次事件

对于咱们平常的工做需求来讲，可能出现的需求是，既须要开始时当即执行，也须要结束时还能再执行一次的节流函数。

综合时间戳节流和定时器节流

/** * 节流函数 * @param func 用户传入的节流函数 * @param wait 间隔的时间 */
const throttle = function (func,wait = 50) {
    let preTime = 0,
        timer = null;
    return function (...args) {
        let now = Date.now();
        // 没有剩余时间 || 修改了系统时间
        if(now - preTime >= wait || preTime > now){
            if(timer){
                clearTimeout(timer);
                timer = null;
            }
            preTime = now;
            func.apply(this,args);
        }else if(!timer){
            timer = setTimeout(()=>{
                preTime = Date.now();
                timer = null;
                func.apply(this,args)
            },wait - now + preTime);
        }
    }
};
复制代码

使用这个定时器节流函数应用在最开始的例子上：

let action = throttle(updateCount,2000);

container.addEventListener('mousemove',action);
复制代码

咱们能够看到，当鼠标移入时，事件当即执行，以后每间隔2000ms后，事件均会执行，当鼠标离开时，前一次事件触发2000ms后，事件最后会再一次执行

咱们继续考虑下面的场景

有时候咱们的需求变成鼠标移入时当即执行，鼠标移除后事件不在执行呢？
有时候咱们的需求变成鼠标移入时不当即执行，鼠标移除后事件还会执行呢？

继续优化

咱们设置 opts 做为 throttle 函数的第三个参数，而后根据 opts 所携带的值来判断实现那种效果，约定以下：

leading : Boolean 是否使用第一次执行
trailing : Boolean 是否使用中止触发的回调执行

修改代码以下：

/** * 节流函数 * @param func 用户传入的节流函数 * @param wait 间隔的时间 * @param opts leading 是否第一次执行 trailing 是否中止触发后执行 */
const throttle = function (func,wait = 50,opts = {}) {
    let preTime = 0,
        timer = null,
        { leading = true, trailing = true } = opts;
    return function (...args) {
        let now = Date.now();
        if(!leading && !preTime){
            preTime = now;
        }
        // 没有剩余时间 || 修改了系统时间
        if(now - preTime >= wait || preTime > now){
            if(timer){
                clearTimeout(timer);
                timer = null;
            }
            preTime = now;
            func.apply(this,args);
        }else if(!timer && trailing){
            timer = setTimeout(()=>{
                preTime = Date.now();
                timer = null;
                func.apply(this,args)
            },wait - now + preTime);
        }
    }
};
复制代码

这里须要注意的是，leading：false 和 trailing: false 不能同时设置。由于若是同时设置的时候，当鼠标移除的时候，中止触发的时候不会设置定时器，也就是说，等到过了设置的时间，preTime不会被更新，此后再次移入的话就会当即执行，就违反了 leading: false

取消

在 debounce 的实现中，咱们加了一个 cancel 方法，throttle 咱们也加个 cancel 方法：

/**
 * 节流函数
 * @param func 用户传入的节流函数
 * @param wait 间隔的时间
 * @param opts leading 是否第一次执行 trailing 是否中止触发后执行
 */
const throttle = function (func,wait = 50,opts = {}) {
    let preTime = 0,
        timer = null,
        { leading = false, trailing = true } = opts,
        throttled = function (...args) {
            let now = Date.now();
            if(!leading && !preTime){
                preTime = now;
            }
            // 没有剩余时间 || 修改了系统时间
            if(now - preTime >= wait || preTime > now){
                if(timer){
                    clearTimeout(timer);
                    timer = null;
                }
                preTime = now;
                func.apply(this,args);
            }else if(!timer && trailing){
                timer = setTimeout(()=>{
                    preTime = Date.now();
                    timer = null;
                    func.apply(this,args)
                },wait - now + preTime);
            }
        };
    throttled.cancel = function () {
        clearTimeout(timer);
        timer = null;
        preTime = 0;
    };
    return throttled;
};
复制代码

至此咱们完成了一个节流函数。

来自我丰哥，前端大神级开发