节流的详细解读

节流的解读

• • 场景
  • 例子说明+代码
  • 运用节流
  • 综上合并

场景

• DOM元素的拖拽
• 射击类游戏
• 监听scroll事件
• …

例子说明+代码

还是利用上一篇文章用到的例子

上一章防抖的详细解读

运用节流

第一版（时间戳，开始时触发）

鼠标刚进入盒子，就触发一次counteAddNum函数，数字 +1 操作，接着每过一个时间触发函数

function throttle(fun, delay) {
    let old = 0;
    return function() {
        let args = arguments;
        const now = Date.now();
        if (now - old > delay) {
            fun.apply(this, args);
            old = now;
        }
    }
}

效果展示

第二版（定时器，结束后再触发一次）

鼠标离开盒子之后，还会触发一次 +1 操作

function throttle(fun, delay) {
    let timmer;
    return function () {
        let that = this;
        let args = arguments;
        if (!timmer) {
            timmer = setTimeout(function () {
                timmer = null;
            }, delay);
        }
    }
}

效果展示

第三版（开始马上触发和结束再次触发）

鼠标进入触发一次 +1 操作，结束后再次触发一次 +1 操作

function throttle(fun, delay) {
    let old = 0,
        timmer;
    return function () {
        let that = this;
        let args = arguments;
        let now = Date.now();
        if (now - old > delay) {
            if (timmer) {
                clearTimeout(timmer);
                timmer = null;
            };
            fun.apply(this, arguments);
            old = now;
        }
        if (!timmer) {
            timmer = setTimeout(function () {
                old = Date.now();
                fun.apply(that, args);
                timmer = null;
            }, delay);
        }
    }
}

效果展示

综上合并

• 增加一个 option参数，存在两个属性leading和trailing
• leading为true,trailing为true，效果如第三版。
• leading为false,trailing为true，效果如第二版。
• leading为true,trailing为false，效果如第一版。
• 注意：不存在两个都为false的情况。

function throttle(fun, delay, option) {
    let timmer;
    old = 0;
    if (!option) option = {};
    return function () {
        let that = this;
        let args = arguments;
        let now = Date.now();
        if (now - old > delay && option.leading) {
            if (timmer) {
                clearTimeout(timmer);
                timmer = null;
            }
            fun.apply(this, arguments);
            old = now;
        }
        if (!timmer && option.trailing) {
            timmer = setTimeout(function () {
                old = Date.now();
                fun.apply(that, args);
                timmer = null;
            }, delay)
        }
    }
}