记录一下学习防抖和节流的操作

所谓节流和防抖,其原理就是定时器,我把我的简单理解记录一下

防抖(debounce):刚开始执行一次,然后在特定时间里该方法只执行一次

场景:用户多次点击按钮

节流(throttle):刚开始不执行,只在特定时间里执行一次

场景:在输入框输入值的时候,可以减少赋值操作

防抖(这边测试是利用原生的写的,当然也可以进行封装操作,刚开始这样好理解一些)

复制代码
     let flag=false
        debounce.onclick=()=>{
            if(!flag){
                flag=true
                 //做的一些事情
                setTimeout(()=>{
                    flag=false
                },1000)
            }
        }
复制代码

节流

    var timer=null
    input.oninput=()=>{
         clearTimeout(timer);
         timer = setTimeout(() => {
           //做的事情
         }, 1000)
     }

 

posted @   blackAge  阅读(25)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
历史上的今天:
2021-06-10 前端vue获取excell中的数据
2021-06-10 前端调用电脑摄像头摄像
点击右上角即可分享
微信分享提示