JS防抖与节流

 //防抖 =>固定的时间内,事件仅允许发生一次(多变一)
        let tel = document.querySelector("input")
        tel.addEventListener("input",antiShake(demo,2000))
        //防抖封装
        function antiShake(fn,wait){
            let timeOut = null;
            return args =>{
                if(timeOut) clearTimeout(timeOut)
                timeOut=setTimeout(fn,wait);
            }
        }
        function demo(){
            console.log("正在发送请求");
        }
        //节流 => 一定时间内只调用一次函数
        //应用场景 => 1.提交表单 2.高频监听事件
        let box = document.querySelector("div")
        box.addEventListener("mouseenter",throttle(demo,2000))
        function throttle(event,time){
            let timer = null 
            return function(){
                if(!timer){
                    timer = setTimeout(()=>{
                        event();
                        timer = null ;
                    },time)
                }
            }
        }

防抖就是在输入号码的时候一次性输入多位数字也就会在后台响应多次,非常消耗网速(bushi)

于是设置定时器,当按一次数字后两秒钟之后才在控制台成功发送请求。也就是在固定时间内事件仅允许发生一次。

节流就好像是将一束大水龙头慢慢变成小水流一样,在一定时间内只调用一次函数

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值