防抖
什么是防抖（debounce）？
- 当事件触发时，相应的函数不会被立即触发，而是会被推迟执行。
- 当事件连续密集触发时，函数的触发会被一直推迟。
- 只有当等待一段时间后也没有再次触发该事件，那么才会真正执行响应函数。
- 简而言之，防抖就是将函数的执行延迟一定时间，如果在该时间内重新触发事件，那么延迟的时间会重置，只有真正达到延迟时间，才会执行回调函数。
- 举个例子：游戏中的回城就可以认为是防抖，在回城的读秒过程中，如果再次执行回城操作，那么会重新进行读秒，只有整个读秒过程都没有再次执行回城操作，那么等到读秒结束才能成功回城。
防抖的应用场景
- 输入框频繁输入内容，搜索或者提交信息。
- 频繁点击按钮，触发某个事件。
- 监听浏览器滚动事件。
- 监听用户缩放浏览器resize事件。
防抖函数案例
-
监听搜索框的oninput事件，那么每输入一个字符就会执行一次回调函数，假如我们在回调函数中进行网络请求，那么用户输入内容时会发送很多次网络请求，这是非常浪费性能的。
-
没有使用防抖函数的效果
-
使用了防抖函数的效果
- 可以看到使用了防抖函数，当频繁触发同一个事件时，只有最后一次会被执行。
实现防抖函数
简易版防抖函数
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
function debounce(fn, delay = 1000) {
// 实现防抖函数的核心是使用setTimeout
// time变量用于保存setTimeout返回的Id
let time = null
function _debounce() {
// 如果time不为0，也就是说有定时器存在，将该定时器清除
if (time !== null) {
clearTimeout(time)
}
time = setTimeout(() => {
fn()
}, delay)
}
// 防抖函数会返回另一个函数，该函数才是真正被调用的函数
return _debounce
}
- 上面防抖函数的实现，已经基本上可以实现防抖的效果，但是还是会有一点小问题，比如说this的指向和原来的函数是不一致的以及参数问题。
防抖函数的实现-this和参数问题
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
function debounce(fn, delay = 1000) {
// 实现防抖函数的核心是使用setTimeout
// time变量用于保存setTimeout返回的Id
let time = null
// 将回调接收的参数保存到args数组中
function _debounce(...args) {
// 如果time不为0，也就是说有定时器存在，将该定时器清除
if (time !== null) {
clearTimeout(time)
}
time = setTimeout(() => {
// 使用apply改变fn的this，同时将参数传递给fn
fn.apply(this, args)
}, delay)
}
// 防抖函数会返回另一个函数，该函数才是真正被调用的函数
return _debounce
}
- 当前我们实现的防抖函数已经基本没有什么问题了，不过如果我们想要让事件第一次触发时，函数会立即执行，而之后的依旧和之前一样。效果如下图所示
- 要实现该功能我们应该是让用户传递一个参数，来决定是否第一次触发要执行。
防抖函数的实现-第一次立即触发
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
// 这里多传一个参数，immediate用来决定是否要第一次立即执行, 默认为false
function debounce(fn, delay = 1000, immediate = false) {
// 实现防抖函数的核心是使用setTimeout
// time变量用于保存setTimeout返回的Id
let time = null
// isImmediateInvoke变量用来记录是否立即执行, 默认为false
let isImmediateInvoke = false
// 将回调接收的参数保存到args数组中
function _debounce(...args) {
// 如果time不为0，也就是说有定时器存在，将该定时器清除
if (time !== null) {
clearTimeout(time)
}
// 当是第一次触发，并且需要触发第一次事件
if (!isImmediateInvoke && immediate) {
fn.apply(this, args)
// 将isImmediateInvoke设置为true，这样不会影响到后面频繁触发的函数调用
isImmediateInvoke = true;
}
time = setTimeout(() => {
// 使用apply改变fn的this，同时将参数传递给fn
fn.apply(this, args)
// 当定时器里的函数执行时，也就是说是频繁触发事件的最后一次事件
// 将isImmediateInvoke设置为false，这样下一次的第一次触发事件才能被立即执行
isImmediateInvoke = false
}, delay)
}
// 防抖函数会返回另一个函数，该函数才是真正被调用的函数
return _debounce
}
- 如果我们需要获得原来函数的返回值，那么我们上面的实现是无法做到的。虽然很少会需要获取返回值，但是这里还是实现一下。
- 如果我们想要获取到返回值，可以让用户传递一个回调函数，这样可以在执行完函数之后，将返回值以参数的形式传递给回调函数。
- 也可以通过返回一个Promise的形式，将参数传递出去。
- 这里采用回调函数的方法实现
防抖函数的实现-返回值问题
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
// 这里多传一个参数，immediate用来决定是否要第一次立即执行, 默认为false
function debounce(fn, delay = 1000, immediate = false, resultCb) {
// 实现防抖函数的核心是使用setTimeout
// time变量用于保存setTimeout返回的Id
let time = null
// isImmediateInvoke变量用来记录是否立即执行, 默认为false
let isImmediateInvoke = false
// 将回调接收的参数保存到args数组中
function _debounce(...args) {
// 如果time不为0，也就是说有定时器存在，将该定时器清除
if (time !== null) {
clearTimeout(time)
}
// 当是第一次触发，并且需要触发第一次事件
if (!isImmediateInvoke && immediate) {
// 将函数的返回值保存到result中
const result = fn.apply(this, args)
if (typeof resultCb === 'function') {
// 当用户传递了resultCb函数时，执行该函数，并将结果以参数传递出去。
resultCb(result)
}
// 将isImmediateInvoke设置为true，这样不会影响到后面频繁触发的函数调用
isImmediateInvoke = true;
}
time = setTimeout(() => {
// 使用apply改变fn的this，同时将参数传递给fn
fn.apply(this, args)
// 当定时器里的函数执行时，也就是说是频繁触发事件的最后一次事件
// 将isImmediateInvoke设置为false，这样下一次的第一次触发事件才能被立即执行
isImmediateInvoke = false
}, delay)
}
// 防抖函数会返回另一个函数，该函数才是真正被调用的函数
return _debounce
}
节流
什么是节流
- 节流是指当事件触发时，会执行这个事件的响应函数。
- 但是该事件如果被频繁触发，那么节流函数会按照一定的频率来执行函数。
- 节流类似于技能cd，不管你按了多少次，必须等到cd结束后才能释放技能。也就是说在如果在cd时间段，不管你触发了几次事件，只会执行一次。只有当下一次cd转换，才会再次执行。
使用节流函数的效果图
实现节流函数
// interval 间隔时间，也就是cd的长短
function throttle(fn, interval) {
//该变量用于记录上一次函数的执行事件
let lastTime = 0
const _throttle = function(...args) {
// 获取当前时间
const nowTime = new Date().getTime()
// cd剩余时间
const remainTime = nowTime - lastTime
// 如果剩余时间大于间隔时间，也就是说可以再次执行函数
if (remainTime - interval >= 0) {
fn.apply(this, args)
// 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
lastTime = nowTime
}
}
// 返回_throttle函数
return _throttle
}
- 上面的代码就是基本的节流函数实现，但是会发现第一次事件的响应函数会立即执行。这是因为我们的lastTime一开始设置为0，而当我们触发事件时，获取到的nowTime是一个非常大的值，那么减去lastTime就会大于interval，所以第一次会立即执行。
实现控制第一次函数是否立即执行的节流函数
// leading参数用来控制是否第一次立即执行，默认为true
function throttle(fn, interval, leading = true) {
//该变量用于记录上一次函数的执行事件
let lastTime = 0
// 内部的控制是否立即执行的变量
let isLeading = true
const _throttle = function(...args) {
// 获取当前时间
const nowTime = new Date().getTime()
// 第一次不需要立即执行
if (!leading && isLeading) {
// 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
lastTime = nowTime
// 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
isLeading = false
}
// cd剩余时间
const remainTime = nowTime - lastTime
// 如果剩余时间大于间隔时间，也就是说可以再次执行函数
if (remainTime - interval >= 0) {
fn.apply(this, args)
// 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
lastTime = nowTime
}
}
// 返回_throttle函数
return _throttle
}
- 实现效果
- 可以发现第一次函数不会立即执行了，但是当我们进行下一轮的点击时，下一轮的第一次事件又会立即执行了。
- 这是因为当下一轮事件触发时，isLeading已经被我们设置为false了，所以不会将lastTime设置为nowTime。
- 想要解决这个问题，就得在一轮事件的最后一个执行函数，将isLeading改为true，这样下一轮事件开始时，isLeading就为true，就能够解决上面的问题。
- 需要使用到定时器，当剩余时间小于间隔时间时，设置一个定时器，定时器的延迟时间为interval，在定时器内将isLeading该为true，
// leading参数用来控制是否第一次立即执行，默认为true
function throttle(fn, interval, leading = true) {
//该变量用于记录上一次函数的执行事件
let lastTime = 0
// 内部的控制是否立即执行的变量
let isLeading = true
// time 保存定时器的id
let time = null
const _throttle = function(...args) {
// 获取当前时间
const nowTime = new Date().getTime()
// 第一次不需要立即执行
if (!leading && isLeading) {
// 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
lastTime = nowTime
// 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
isLeading = false
}
// cd剩余时间
const remainTime = nowTime - lastTime
// 如果剩余时间大于间隔时间，也就是说可以再次执行函数
if (remainTime - interval >= 0) {
fn.apply(this, args)
// 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
lastTime = nowTime
}
if (remainTime < interval) {
// 判断是否存在定时器，如果存在则取消掉
if (time) clearTimeout(time)
// 设置定时器
time = setTimeout(() =>{
// 由于该定时器，会在没有事件触发的interval时间间隔后才会执行，也就是说一轮事件
// 执行已经结束，使用需要将isLeading复原，这样下一轮事件的第一次事件就不会立即执行了。
isLeading = true
}, interval)
}
}
// 返回_throttle函数
return _throttle
}
- 上面实现的节流函数已经可以实现控制第一次事件是否立即执行了，但是还是不够。如果我们想要一轮点击事件中的最后一次事件绑定函数能够执行，那么我们目前实现的节流函数是没办法实现这个功能的。
- 其实在已经实现的代码中，想要实现最后一次事件绑定函数能够执行，是非常简单的，我们只需要让用户传递一个参数，用来控制最以后一次是否执行，然后在定时器内做一下判断即可实现。
// trailing参数用来控制是否最后一次是否执行，默认为false
function throttle(fn, interval, leading = true, trailing = false) {
//该变量用于记录上一次函数的执行事件
let lastTime = 0
// 内部的控制是否立即执行的变量
let isLeading = true
// time 保存定时器的id
let time = null
const _throttle = function(...args) {
// 获取当前时间
const nowTime = new Date().getTime()
// 第一次不需要立即执行
if (!leading && isLeading) {
// 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
lastTime = nowTime
// 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
isLeading = false
}
// cd剩余时间
const remainTime = nowTime - lastTime
// 如果剩余时间大于间隔时间，也就是说可以再次执行函数
if (remainTime - interval >= 0) {
fn.apply(this, args)
// 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
lastTime = nowTime
}
if (remainTime < interval) {
// 判断是否存在定时器，如果存在则取消掉
if (time) clearTimeout(time)
// 设置定时器
time = setTimeout(() =>{
// 判断是否最后一次需要执行
if (trailing) {
// 最后一次需要执行
fn.apply(this, args)
}
// 由于该定时器，会在没有事件触发的interval时间间隔后才会执行，也就是说一轮事件
// 执行已经结束，使用需要将isLeading复原，这样下一轮事件的第一次事件就不会立即执行了。
isLeading = true
}, interval)
}
}
// 返回_throttle函数
return _throttle
}
- 经过不断的修改，目前实现的节流函数，已经是比较完善的，如果想要获取返回值，可以参考防抖函数的实现方式。
