防抖与节流总结

防抖与节流的简单应用:
一次写的不好大家请指出谢谢!!!

防抖

函数防抖:在特定的时间内,没有再次触发特定条件,就执行一次任务。
白话:例如 搜索框 —> 用户一直输入,等停下来一段时间----->就执行一次任务
再次解释:
控制函数在n秒内只能执行一次,如果用户在n秒内重复的触发事件,则重新计时且函数不会被执行,只有等到用户不再触发事件的时候才去执行一次。

实例:

 搜索框定义的事件 () {
     clearTimeout(定时器标识)
            定时器标识 = setTimeout(() => {
            
            执行的程序--------
            
        }, 1000)
   }

解释: 首选程序从上到执行,先清除上一次的定时器,在等待1秒以后在执行这一次的程序------ 事件一直触发,一直清除前一次的定时器,也就形成了,只执行最后一次程序,达到了减少了http请求效果 。

应用场景
关键字搜索,限制接口调用频率
表单验证,验证邮箱的格式,停止输入时再做验证
等等。。。

节流

函数节流在特定时间内会固定触发一次任务,并且是规律的
目标代码会按照我们设定的时间间隔即每隔n秒就执行一次
白话: 事件触发,会先执行第一次,假如第一次代码没有执行完毕,这个时候再次触发事件,这个时候第二次执行的 这个函数不会执行。


var  switch = false;
定义的事件 () {
  第一次触发为false
  if (switch) {
   // 再次触发事件  会终止后续代码的执行,
    return
  }
  switch = true    
  代码执行中
  setTimeout(async () => {

      执行的程序--------

    // 程序执行完毕
    switch = false
  }, 1000)
}

应用场景:
对于高频事件一般要做触发频率的显示
滚动 ----> 加载更多

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值