1. 概念
- 节流：事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
- 防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间，如果没有再次触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待1秒，知道能最终执行。
2. 使用场景
- 节流：滚动加载更多、搜索框搜索联想功能、高频点击、表单重复提交
- 防抖：搜索框搜索输入，并输入完成以后自动搜索；手机号，邮箱验证输入检测；窗口大小resize变化后，再重新渲染
3. 代码实例
代码语言：javascript
复制/*
* 函数节流
*/
function throttle(fn, wait) {
let last = 0
let dur = wait || 400
return function() {
let self = this
const current_time = new Date()
if(current_time - last > dur) {
fn.apply(self, arguments)
last = new Date()
}
}
}
/*
* 函数防抖
*/
function throttle(fn, wait) {
let timer
let dur = wait || 400
return function() {
clearTimeout(timer)
let self = this
let args = arguments
timer = setTimeout(function() {
fn.apply(self, args)
}, dur)
}
}
