什么是节流防抖？
在用户浏览网页或者在网页上进行一些操作时，我们常常需要监听一些事件去完成相应的功能。比如鼠标点击、键盘输入、滚轮滚动等等一些事件。
在处理这些事件时，我们可能会发现，某些事件发生的频率特别高，有的事件监听函数甚至直接造成了页面的卡顿和崩溃。
举个例子，假如我们需要在用户输入时，根据用户的输入内容自动联想相关词汇进行搜索：
const input = document.querySelector('input')
input.addEventListener('input', () => {
console.log(1)
})
此时可以看到这个效果：
用户每输入一个字符就进行一次相关操作，有时候很可能是还没有输入完成或者输错的情况，但我们的代码也进行了一次操作，这就造成了一些不必要的网络请求和性能浪费。
所以，我们并不需要代码如此高频率的执行，这在一定程度上对系统资源造成了浪费，程序的性能也会因此变得很差。因此，我们需要对这些事件的监听做更进一步的处理，对代码的执行频率进行一些限制。这就是所谓的节流防抖。
节流防抖的原理
节流和防抖，二者的作用虽然相同，但是在原理和实现上存在一定的区别：
节流：频繁地触发某个事件，但一定的时间内只执行一次。函数名通常为 throttle。
防抖：频繁地触发某个事件，但只执行最后一次。函数名通常为 debounce。
实现节流函数
虽然事件不断地被触发，但节流函数就就像红绿灯一样，不管前面有多少车辆排队，我就是需要等待一段时间才变为绿灯，你才能通行。
所以最直接的方式还是利用定时器去处理。当事件首次被触发时，开始计时 wait 毫秒，wait 毫秒以内不管触发了多少次，都会被忽略，直到计时结束后再去执行。
思路有了，方法就不难实现。将事件处理函数设为第一个参数 func，将等待时间设为第二个参数 wait。
// 节流函数
function throttle(func, wait) {
// 创建一个定时器
let timeout = null
// 返回一个函数，这个函数会在一个时间区间结束后调用 func
return function() {
// 如果定时器还在运行，则跳过
if (timeout) return
// 否则，设置定时器，等待 wait 毫秒后执行 func 函数
timeout = setTimeout(() => {
// 执行 func 函数
func.apply(this, arguments)
// 清空定时器
timeout = null
}, wait)
}
}
在上面的代码中，我们创建了一个定时器，并将它赋值给了一个变量 timeout。当事件被触发时，我们检查定时器是否在运行，如果在运行，则跳过，否则执行。
为 input 事件添加节流函数：
input.addEventListener('input', throttle(handleInput, 500))
运行效果：
实现防抖函数
如何判断是否为频繁触发的最后一次，很简单，我们只需要在第一次触发该事件时，设定一个等待 wait 毫秒的定时器，在计时器结束之前如果再次被触发，则重新计时，直至不再被触发，再去执行传入的函数。
根据这个思路，我们就可以很轻松的实现一个基础的 debounce 方法。将事件处理函数设为第一个参数 func，将等待时间设为第二个参数 wait。
// 防抖函数
function debounce(func, wait) {
// 创建一个定时器
let timeout
// 返回一个函数，这个函数会在一个时间区间结束后调用 func
return function() {
// 如果定时器还在运行，则清除定时器
timeout && clearTimeout(timeout)
// 否则，设定定时器，等待 wait 毫秒后执行 func 函数
timeout = setTimeout(() => {
// 执行 func 函数
func.apply(this, arguments)
}, wait)
}
}
在上面的代码中，我们创建了一个定时器，并将它赋值给了一个变量 timeout。当事件被触发时，我们检查定时器是否在运行，如果在运行，则清除定时器，否则执行。
为 input 事件添加防抖函数：
input.addEventListener('input', debounce(handleInput, 500))
运行效果：
apply
上面的代码中使用了 apply，它是 Function.prototype 的一个方法，作用是将一个函数的作用域设置为某个对象，并将参数传入函数。
有关 apply 的详细介绍，可以点击 这里 查看。
源码下载
点击 这里 查看源码。
