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