性能优化之节流工具函数

节流第一种方法

utils.throttle = funciton(fn, context, delay) {
	let timer = null;
	return function() {
		if (timer === null) {
			let _args = arguments;
			
			timer = setTimeout(() => {
				timer = null;
				fn.apply(context, _args);
			}, delay);
		}
	}
} 

上面是节流的其中一种方法，容易理解。但是它不能够第一次触发后立即响应，这不太符合一些场景，比如刷新按钮，点击后不能立即刷新，要间隔延时间后才触发，给人一种卡顿的感觉。

下面给出另外两种节流方法。

utils.throttle = function(fn, context, delay, lastExecute) {
    let last, timer;

    if (!lastExecute) { // 不需要确保执行最后一次回调
        return function() {
            let _args = arguments;
            let now = +new Date();

            if (last && now < last + delay) return;
            
            last = now;
            fn.apply(context, _args);
        }
    }

    return function() {
        let _args = arguments;
        let now = +new Date();

        if (last && now < last + delay) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(context, _args);
            }, delay);
        } else {
            last = now;
            fn.apply(context, _args);
        }
    }
}

这里throttle给出第四个参数，用于判断使用哪种方式。这两种方式都能够第一次触发后立即响应，区别在于是否需要确保最后一次触发执行。看下图操作。

事例

        function ajax() {
            console.log('request');
            setTimeout(() => {
            	// request success
            }, 500);
        }

        let btnClick = throttle(ajax, null, 1000),
            btnClick2 = throttle(ajax, null, 1000, true),
            btn = document.getElementById('btn'), // 按钮
            btn2 = document.getElementById('btn2'); // 按钮（后摇）

        btn.addEventListener('click', function() {
            btnClick();
        });
        btn2.addEventListener('click', function() {
            btnClick2();
        });

两种方式都规定每间隔1秒只触发处理一次。
现在两个按钮，分别点击10次，效果如下。

• 可以看到第一个按钮狂点十下后，触发了两次处理事件。
• 第二个按钮狂点十下，最后还会再触发多一次。这就好像王者荣耀的花木兰或孙策的技能后摇，如果没有把握节奏，猛按三连技能，它会间断触发技能，即使最后一次点完后，你想退场了，但是迟来的技能触发会影响你的走位（不说了，太菜了~）。