来手写一次防抖节流吧！
前言
在我们日常的项目开发中，常常会进行窗口的 resize、scroll 输入框等操作，当出现高频的操作是容易引发性能问题，那作为性能优化的一把好手，我想大家对 防抖(debounce) 和 节流(throttle) 是熟的不能再熟了吧。
- 防抖跟节流这俩概念相似常常容易被人混淆
- 防抖节流在实际项目中也颇为实用，能够起到节省性能的作用
- 在面试中也是常常出现，手写防抖节流更是难倒了一大片好汉
那就再来看看吧，这一次彻底掌握 防抖 和 节流！
防抖(debounce)
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，连续触发一个函数，只执行最后一次。
当一个事件频繁触发，而我们希望在事件触发结束一段时间后（此段时间内不再有触发）才实际触发响应函数时会使用防抖（debounce）。例如用户一直点击按钮，但你不希望频繁发送请求，你就可以设置当点击后 200ms 内用户不再点击时才发送请求。
应用场景：
- 输入用户名、密码；
- 搜索框输入；
- 浏览器窗口调整大小，只需要在最后一次调整完毕后调用 resize 回调，防止重复渲染。
防抖的实现原理
在防抖函数内部维护一个定时器，通过定时器延迟执行触发函数，每次调用防抖函数都会清除定时器重新开始计时，这样能保证只有最后一次操作能被触发。
防抖的简单实现
先来实现一个最简单的防抖，在定时器的时间结束之后触发 传入的 fn() ，
// 防抖函数
const debounce = (fn, delay) => {
let timer;
return function () {
// 返回的函数中 this 指向触发事件的 window
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
// 定时器中的 window
fn()
}, delay);
};
};
// 处理函数
function handle() {
// 处理函数的 this 指向 window
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
而此时暂时还能满足当前的需求，此时各个环境中的 this 指向 window 。
如果返回的 fn 函数需要回去事件的参数 e 此时会发生什么情况呢？
// 处理函数
function handle(e) {
console.log('handle',e); // undefined
}
在定时器没有为 fn() 传参的情况下， c输出 e 的结果为 undefined，所以需要为 fn 传递参数 args。
那换一种场景，当我们在输入框进行输入操作时，每次的输入会产生一次联想请求，持续高频的输入会造成页面的卡顿，那如何用防抖来进行优化呢？
<div class="haha">
<input class="debounce" type="text">
div>
<script>
// 防抖函数
const debounce = (fn, delay) => {
let timer;
return function () {
const context = this;
const args = arguments;
console.log('debounce',this)
clearTimeout(timer);
timer = setTimeout(function() {
console.log('timer',this)
// 若不改变 this 指向，则会指向 fn 定义环境, window 或者 undefined
fn(...args)
}, delay);
};
};
// 处理函数
function ajax(e) {
console.log('handle',this,e.target);
}
// 输入事件
const debounceInput = document.getElementsByClassName("debounce")[0];
debounceInput.addEventListener("keyup", debounce(ajax, 500));
script>
此时我们会发现 ajax 中的 this 指向了 window 而不是触发对象。
从控制台输出的结果来看，处理函数中的 this 指向了 window ，指向了函数定义时的环境。
在日常的开发中我们常用 call apply 来修改 this 的指向
// 在定时器中改变 fn 中的 this 指向，
// 若不改变 this 指向，会指向 fn 定义环境, window 或者 undefined (严格模式下)
fn.apply(context, arg);
// 或者
fn.call(context, ...arg)
优化防抖
- 解决处理函数的传参问题
- 在定时器中为 fn 传入 arguments 参数，让处理函数在执行时能够接收事件参数里的数据。
- 解决处理函数中的** this 指向问题**
- 若不改变，fn 中的 this 会指向定义时的 this 环境，此时 this 就会指向 window 或 undefined。
- 通过 apply 或者 call 来修改 this 指向问题， 确保调用 fn() 的对象与触发事件的对象抱持一致。
// 防抖函数
const debounce = (fn, delay) => {
// debounceInput 触发防抖时 this 指向 debounceInput 的 dom 对象
let timer;
return function () {
const context = this;
const args = arguments;
// 此时返回的函数中 this 指向触发键盘输入的 dom 元素对象 (debounceInput)
console.log('debounce',this)
clearTimeout(timer);
timer = setTimeout(function() {
console.log('timer',this)
// 若不改变 this 指向 会指向 fn 定义环境，
// 修改后的 this 指向触发事件的 dom 对象
fn.apply(context,args);
}, delay);
};
};
image.png
节流(throttle)
当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。
当一个事件频繁触发，而我们希望间隔一定的时间再触发相应的函数时， 就可以使用节流（throttle）来处理。比如判断页面是否滚动到底部，然后展示相应的内容，该功能就可以使用节流实现，在滚动时每300ms进行一次计算判断是否滚动到底部的逻辑，而不用无时无刻地计算。
应用场景：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，触底加载更多，一段时间内请求一次数据展示
- 搜索联想，限制用户在输入时每两秒钟响应一次联想
- 拖拽时固定时间内只执行一次， 防止高频率的的触发位置变动
节流原理
通过判断是否到达一定时间来触发函数，由于每隔一段时间执行一次，那么就需要计算时间差，我们有两种方式来计算时间差：一种是使用时间戳，另一种是设置定时器。我们有以下三种实现方式：
- 时间戳
- 定时器
- 定时器 + 时间戳
时间戳实现
通过获取当前的时间戳，与上一次的时间戳（初始值为0）进行计算得出两次执行的差值，将时间差与设置的延迟时间进行比较：
- 当时间差大于等于设置的 delay 时间则执行函数
- 当时间差小于则继续等待
function throttle(func, delay) {
let args;
let lastTime = 0;
return function () {
// 获取当前时间
const currentTime = new Date().getTime();
args = arguments;
if (currentTime - lastTime > delay) {
func.apply(this, args);
lastTime = currentTime;
}
};
}
通过时间戳实现的节流也称之为 **首节流 **，因为首节流在触发事件时立即执行，以后每过 delay 秒之后才执行一次，并且最后一次触发事件若不满足要求不会被执行
定时器实现
在事件触发时设置一个定时器， 当再次触发事件时，
- 如果定时器存在，直接 return 不进行任何操作，直到当前的定时器执行完毕；
- 如果定时器不存在则设置定时器，
- 定时器经过 delay 秒的延时时间后，执行传入的 fn()，最后清空定时器，方便下一次设置定时器。
function throttle1(fn, delay) {
let timer;
return function () {
const context = this;
let args = arguments;
if (timer) return;
timer = setTimeout(function () {
console.log("hahahhah");
fn.apply(context, args);
clearTimeout(timer);
timer = null;
}, delay);
};
}
通过定时器实现的节流被称之为 **尾节流 **，因为尾节流的第一次触发不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数。
定时器 & 时间戳
以上两种方式确实能够实现节流，但是他们都只能实现执行第一次或者最后一次，无法同时满足第一次与最后一次执行的并存。
那么如果将定时器和时间戳相互结合是否能够满足这个需求呢？
- 根据时间戳判断时间差大于 delay 时间
- 判断定时器，
// 定时器 + 时间戳 首尾都执行
function throttle(fn, delay) {
let timer, context, args;
let lastTime = 0;
return function () {
context = this;
args = arguments;
let currentTime = new Date().getTime();
// 清空定时器
clearTimeout(timer);
// 时间差 大于 delay 时
if (currentTime - lastTime > delay) {
// 防止时间戳和定时器重复
// 清空定时器后直接 执行 fn
fn.apply(context, args);
lastTime = currentTime;
} else {
timer = setTimeout(() => {
// 设置定时器 更新执行时间, 防止重复执行
lastTime = new Date().getTime();
// 执行后 清空定时器
fn.apply(context, args);
}, delay);
}
};
}
lodash 中的防抖节流
_.debounce 防抖
创建一个防抖函数，从上一次被调用后延迟 wait 毫秒后执行 func 函数。
参数
_.debounce(func, [wait=0], [options=])
- func: 防抖动的函数
- wait: 延迟时间
- option：选项对象
- leading=false：指定在延迟开始前调用。
- maxWait：func 允许被延迟的最大时间。
- trailing=true：指定延迟结束后调用。
- 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 的立即调用
使用方式：
// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
'leading': true,
'trailing': false
}));
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);
在vue 项目中的实现
// 在 vue 中的使用实现
refLineDebounce: _.debounce(() => {
const { vLine, hLine } = self.assistLineParams
self.vLine = vLine
self.hLine = hLine
}, 30),
_.throttle 节流
创建一个节流函数, 在 wait 秒内最多只执行一次 func() 函数。
参数
_.throttle(func, [wait=0], [options=])
- func: 要节流的函数。
- wait: 需要节流的毫秒。
- options: 选项对象。
- leading=true: 指定调用在节流开始前。
- trailing=true： 指定调用在节流结束后。
- 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);
在调节窗口大小时可以通过节流来实现
onResize: _.throttle((index, item, x, y, w, h) => {
item.chartWidth = w
item.chartHeight = h
}, 100),
总结
防抖和节流都是为了限制了用户的操作次数，避免频繁的触发造成页面的卡顿，从而提高页面的性能。
主要的区别就是：
防抖: 在频繁触发的过程中，只会在最后一次执行(延迟执行)
节流：在固定的时间内只执行一次函数
参考
- 老生常谈的函数防抖与节流
- 【手写代码】面试官：请你手写防抖和节流
- JS的防抖与节流