共计 4407 个字符，预计需要花费 12 分钟才能阅读完成。
前言
js 的典型的场景
- 监听页面的 scroll 事件
- 拖拽事件
- 监听鼠标的 mousemove 事件
…
这些事件会频繁触发会影响性能，如果应用节流，升高频次，保留了用户体验，又晋升了执行速度，节俭资源。
原理
节流的原理 ：继续触发某事件，每隔一段时间，只执行一次。
艰深点说，3 秒内屡次调用函数，然而在 3 秒距离内只执行一次，第一次执行后 3 秒 忽视前面所有的函数调用申请，也不会延长时间距离。3 秒距离完结后则开始执行新的函数调用申请，而后在这新的 3 秒内仍旧忽视前面所有的函数调用申请，以此类推。
简略来说：每隔单位工夫（3 秒），只执行一次。
实现形式
目前比拟支流的实现形式有两种：工夫戳、定时器。
工夫戳实现
应用工夫戳实现：首先初始化执行事件的工夫 previous 为 0，而后将以后的工夫戳减去上次执行工夫（now – previous），如果大于 wait，则间接执行函数，并且将此时的执行工夫 now 赋给 previous（previous = now）。
因为首次 previous = 0，则此时函数第一次触发就会立刻执行。
后续则每隔 wait 工夫执行一次，如果进行触发，则不会再执行函数。
// 因为一开始 now - 0 > wait，则这个写法，工夫会立刻执行，没过一秒会执行一次，进行触发，则不会再执行事件
function throttle(func, wait = 500) {
let context, now;
let previous = 0; // 设置过来的执行工夫初始值为 0
return function (...args) {
context = this;
now = +(Date.now() || new Date().getTime());
if (now - previous > wait) {func.apply(context, args);
previous = now;
}
};
}定时器实现
应用定时器实现：首先初始化 timeout，而后定义!timeout 为 true 的状况下，间接执行 setTimeout，，期待 wait 工夫后执行函数，而后清空 timeout，以此类推，从新进入也会按上述执行。
因为进入函数，就执行 setTimeout，所以不会立刻触发函数执行。
后续则每隔 wait 工夫执行一次，如果进行触发，而后还会触发执行一次函数。
// 因为一进入就创立了定时器，所以不会立刻触发函数执行
function throttle(func, wait = 500) {
let context, timeout;
return function (...args) {
context = this;
if (!timeout) {timeout = setTimeout(function () {
timeout = null;
func.apply(context, args);
}, wait);
}
};
}合并版本
如果，咱们须要既刚开始就立刻执行，进行触发后，还会触发执行一次函数。
上面，咱们将定时器和工夫戳合并，组成一个全新的节流版本。
function throttle(func, wait = 500) {
let context, timeout, result;
let previous = 0;
const throttled = function (...args) {
context = this;
const now = +(Date.now() || new Date().getTime()); // 以后工夫
// 下次触发 func 剩余时间
const remaining = wait - (now - previous);
// 如果没有剩余时间或者改了零碎工夫, 这时候不须要期待，间接立刻执行，这样就会第一次就执行
if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
// 残余的状况就是 remaining<=wait 的状况，这里应用 setTimeout 就能够最初也会执行一次
timeout = setTimeout(function () {
timeout = null;
previous = +(Date.now() || new Date().getTime()); // 这里是将 previous 从新赋值以后工夫
func.apply(context, args);
}, remaining);
}
};
return throttled;
}合并版本优化
因为合并后的版本并没用返回值的优化 + 勾销性能。
上面对代码进行返回值 + 勾销性能优化：
function throttle(func, wait = 500) {
let context, timeout, result;
let previous = 0;
const showResult = function (e1, e2) {result = func.apply(e1, e2);
return result;
};
const throttled = function (...args) {
context = this;
const now = +(Date.now() || new Date().getTime()); // 以后工夫
// 下次触发 func 剩余时间
const remaining = wait - (now - previous);
// 如果没有剩余时间或者改了零碎工夫, 这时候不须要期待，间接立刻执行，这样就会第一次就执行
if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);
timeout = null;
}
previous = now;
return showResult(context, args);
} else if (!timeout) {
// 残余的状况就是 remaining<=wait 的状况，这里应用 setTimeout 就能够最初也会执行一次
timeout = setTimeout(function () {
timeout = null;
previous = +(Date.now() || new Date().getTime()); // 这里是将 previous 从新赋值以后工夫
return showResult(context, args);
}, remaining);
}
retrun result
};
throttled.cancel = function () {if (timeout !== undefined) {clearTimeout(timeout);
}
previous = 0;
context = timeout = result = undefined;
};
return throttled;
}功能性优化
有时候，咱们也心愿无头有尾，或者有头无尾。
function throttle(func, wait = 500, options = {}) {
let context, timeout, result;
let previous = 0;
// 如果同时设置无头无尾，则间接应用默认设置, 其余状况，则走下述操作
if (!(options.leading === false && options.trailing === false)) {
leading = !!options.leading; // 默认去除立刻执行局部
trailing = "trailing" in options ? !!options.trailing : true; // 默认保留尾部
}
// 返回原函数的 return
const showResult = function (e1, e2) {result = func.apply(e1, e2);
return result;
};
// 获取以后工夫
const getNow = function () {return +(Date.now() || new Date().getTime());
};
const throttled = function (...args) {
context = this;
const now = getNow(); // 以后工夫
// 下次触发 func 剩余时间
if (!previous && leading === false) previous = now;
const remaining = wait - (now - previous);
// 如果没有剩余时间或者改了零碎工夫, 这时候不须要期待，间接立刻执行，这样就会第一次就执行
if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);
timeout = null;
}
previous = now;
return showResult(context, args);
} else if (!timeout && trailing !== false) {
// 残余的状况就是 remaining<=wait 的状况，这里应用 setTimeout 就能够最初也会执行一次
timeout = setTimeout(function () {
timeout = null;
previous = options.leading === false ? 0 : getNow(); // 这里是将 previous 从新赋值以后工夫
return showResult(context, args);
}, remaining);
}
return result;
};
throttled.cancel = function () {if (timeout !== undefined) {clearTimeout(timeout);
}
previous = 0;
context = timeout = result = undefined;
};
return throttled;
}这里，如果 options 不传参数，函数默认设置
let leading = false
let trailing = true也就是无头有尾。
如果同时设置无头无尾，则会间接采纳默认设置，无头有尾。
// 如果同时设置无头无尾，则间接应用默认设置, 其余状况，则走下述操作
if (!(options.leading === false && options.trailing === false)) {
leading = !!options.leading; // 默认去除立刻执行局部
trailing = "trailing" in options ? !!options.trailing : true; // 默认保留尾部
}演示地址
能够去 Github 仓库查看演示代码
跟着大佬学系列
次要是日常对每个进阶知识点的摸透，跟着大佬一起去深刻理解 JavaScript 的语言艺术。
后续会始终更新，心愿各位看官不要悭吝手中的赞。
❤️ 感激各位的反对！！！
❤️ 如果有谬误或者不谨严的中央，请务必给予斧正，非常感激！！！
❤️ 喜爱或者有所启发，欢送 star！！！
参考
- JavaScript 专题之跟着 underscore 学节流
- underscore.js
- 深入浅出节流函数 throttle
原文地址
【跟着大佬学 JavaScript】之节流
