防抖与节流无论是在面试还是在平时使用中都是会经常遇到的，本文将介绍防抖与节流的特点，实现与使用场景
当我们直接使用监听输入框的input的时候，是下图的效果
2.gif
防抖(debounce)
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
特点
使用防抖处理之后，500毫秒内如果再次输入，会重新开始计时
1.gif
实现
function debounce(fn) {
// 用来存放定时器的返回值
let timer = null
return function() {
// 每次触发防抖的时候，把前面一个定时器清除掉
clearTimeout(timer)
timer = setTimeout(() => {
// 为了却表上下文环境为当前的this
fn.apply(this, arguments)
}, 500)
// 定义时间
}
}
适用场景
比如用户搜索框输入内容，不使用防抖用户每个输入的内容都会向后台发送请求，使用防抖之后，等到用户输入完毕后才会发送请求，减少服务器压力。
特点
无论你怎么输，每500毫秒触发一次函数
3.gif
节流(throttle)
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
实现
function throttle(fn) {
// 保存一个标记
let canRun = true
return function() {
// 说明函数还未运行
if(!canRun) return
canRun = false
setTimeout(() => {
fn.apply(this, arguments)
// 运行完毕后设置为true，可以进行下次函数
canRun = true
}, 500)
}
}
适用场景
懒加载监听浏览器滚动位置
