正文
JavaScript之 函数节流（Throttling） 与 防抖（Debounce）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Throttling：在监听鼠标移动事件、盒子滚动事件等使用节流技术能节省性能消耗
/**
* 节流函数（每隔t执行一次）
*/
function Throttling(fn, t) {
const timer = null return function() {
// 执行完上一次的内容后才执行下一次的内容
if(!timer) {
const arg = arguments
const context = this
timer = setTimeout(() => {
fn.apply(context, arg)
// 或使用 clearTimeout(timer)，清除计时器
timer = null
}, t)
}
}
}
Debounce：在实现输入框联想搜索时，可以等到输入完之后在进行联想搜索，避免频繁发送请求消息造成卡顿
/**
* 防抖函数（只执行最后一次）
*/
function Debounce(fn, t) {
const timer = null return function() {
// 如果计时器已经存在，那么取消此次执行
timer && clearTimeout(timer)
const context = this
const arg = arguments
// 执行计时器
timer = setTimeout(() => {
fn.apply(context, arg)
clearTimeout(timer)
}, t)
}
}
