废话不多说，开箱即用
# HTML
<h2>防抖与节流</h2>
<input class="antiShake" placeholder="请输入-防抖">
<div class="throttle">节流</div>
# 防抖
/**
* @func 防抖：用户短时间内多次触发请求，只发起最后一次，将多个请求变成一次
* @desc 核心：一定时间内没有继续操作后执行处理函数。时间范围内只要来新请求，立刻取消上一次操作。新请求比老请求更有业务价值
* @desc 经典案例：模糊搜索
*/
let telInput = document.querySelector('.antiShake')
// 未防抖情形
// telInput.addEventListener('input', (e) => {
// request()
// })
// 加了防抖 - antiShake通过闭包返回了函数
telInput.addEventListener('input', antiShake(request, 2000))
// 防抖函数 (本案例利用闭包实现，这样无需再antiShake外部定义timeout变量)
function antiShake(fn, wait) {
let timeout = null
return args => {
if (timeout) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
}
function request() {
console.log('发起请求了')
}
# 节流
/**
* @func 节流：用户的某些操作导致重复的发起相同的请求，只发起第一次
* @desc 应用场景：提交表单，点击提交按钮，告片的监听事件如touchmove
*/
let box = document.querySelector('.throttle')
// 未节流情形
// box.addEventListener('touchmove', (e) => {
// request()
// })
// 加了节流：
box.addEventListener('touchmove', throttle(request, 2000))
// 节流函数：触发后开始计时，时间间隔内再过来的请求直接忽略，计时完成执行函数后，再接收下一个请求
function throttle(event, wait) {
let timer = null
return args => {
if (!timer) {
timer = setTimeout(() => {
event()
timer = null
}, wait)
}
}
}
function request() {
console.log('发起请求了')
}
