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

原创已于 2024-07-11 10:00:54 修改 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-07-11 09:31:06 首次发布

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

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

代码演示：

防抖：

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) 
}

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