在进行窗口的resize、scroll，输入框内容校验，防止按钮重复点击等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，体验糟糕。所以可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
我们一起先来看看防抖和节流的区别
| 名称 | 相同点 | 区别 |
|---|---|---|
| 防抖 | 都是防止函数多次被调用 | 重复调用时，只有最后的一次会执行 |
| 节流 | 重复操作时，间隔一定的时间才调用 |
防抖函数 debounce
// 防抖
function debounce(fn, wait = 20) {
let timeout = null
return function() {
if (timeout !== null) {
clearTimeout(timeout)
}
timeout = setTimeout(fn, wait)
}
}
节流函数 throttle
// 节流
function throttle(fn, delay = 20) {
let last = Date.now()
return function() {
let now = Date.now()
if (now - last > delay) {
fn()
last = now
}
}
}
如何调用
function handle() {
console.log('你点我了，在这里执行你想要执行的操作！')
}
// 防抖调用方式
document.querySelector('button').onclick = debounce(handle, 300)
// 节流调用方式
document.querySelector('button').onclick = throttle(handle, 300)
防抖和节流都利用了闭包，首先就调用了debounce和debounce方法，把内部的方法返回出去，下次自己执行，以后有时间我再写一下闭包吧，所以我还留下一个问题，这样会不会造成内存泄漏？
