关于节流和防抖这一问题会经常在前端面试中问到，笔者认为可以从以下几个方面回答
1.节流
节流是什么
函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
节流函数的适用场景：
拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动 缩放场景：监控浏览器resize 动画场景：避免短时间内多次触发动画引起性能问题
源代码
代码语言：javascript复制// 节流（一段时间执行一次之后，就不执行第二次）
function throttle(fn, delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this, arguments)
canUse = false
setTimeout(()=>canUse = true, delay)
}
}
}
const throttled = throttle(()=>console.log('hi'))
throttled()2.防抖
防抖是什么
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
防抖函数的适用场景：
按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次。 服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce。
源代码
代码语言：javascript复制// 防抖（一段时间会等，然后带着一起做了）
function debounce(fn, delay){
let timerId = null
return function(){
const context = this
if(timerId){window.clearTimeout(timerId)}
timerId = setTimeout(()=>{
fn.apply(context, arguments)
timerId = null
},delay)
}
}
const debounced = debounce(()=>console.log('hi'))
debounced()
