前端开发中遇到的节流与防抖

防抖：简单总结为多次触发事件只执行最后一次

节流：规定时间内只执行一次（每规定时间执行一次，不会被打断）

代码演示：

防抖：

let timerId = null

const eventTrigger = (timeLimit) => {
    //定时器不为空就删除，只执行最后一个定时器
    if( timerId !== null) {
        clearTimeout(timerId) 
    }
    timerId = setTimeout(()=>{
    //这里可以做一些事件处理操作
    console.log("我是防抖")
    },timeLimit) 
}

节流：

let timerId = null
//timeLimit为定时器限制时间
const eventTrigger = (timeLimit) => {
    //定时器不为空就跳出，不执行下一个定时器
    if( timerId !== null) {
        return
    }
    timerId = setTimeout(()=>{
    //这里可以做一些事件处理操作
    console.log("我是节流")
    //事件结束，定时器设置为空
    timerId = null
    },timeLimit) 
}

总结：节流防抖都是为了性能优化，减少请求对后端的压力