防抖 和是节流

对于防抖和节流 其实很多语言 包括 操作硬件按钮时也可能用到 对于前端来说也节约了一定资源
防抖和节流的区别是防抖即触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。节流即高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率
前端中 常用例子input的输出 和DIV拖拽时输出位置
const input=document.getElementById(‘input’)
let timer=null
input .addEventListener(‘keyup’, ()=>{
if(timer){ // 根据防抖原理 查看是否还处于上次输入字符的时间内
clearInterval(timer) //处于上次延时函数直接清除从本次重新计算
}
timer=setTimeout(() => {
console.log(input.value)
timer=null // 输出结果后 清空timer变量 方便if判断
}, 500);
})

const div=document.getElementById(‘app’)
let timer=null
div .addEventListener(‘drag’, (e)=>{
if(timer){
return //根据节流原理 如果处于上一次drag(timeout)内 就直接 返回 防止规定时间内输出多次拖拽的结果
}
timer=setTimeout(() => {
console.log(e.offsetX,e.offsetY)
timer=null
}, 500);

      }) 

防抖和节流都用来节约资源
很明显 防抖将多次执行变为了一次 节流是将多次变为间隔执行
防抖 一般应用到 用户输入请求的时候可以节约请求资源
节流 尤其 鼠标点击时 规定时间 只可点击一次