防抖和节流使用场景、代码实战、防抖节流代码封装

本文详细介绍了防抖和节流这两种优化性能的技术,通过实例和代码演示了它们的实现原理、应用场景及如何在JavaScript中使用,帮助读者更好地理解并掌握这两种技术。
摘要由CSDN通过智能技术生成
1.防抖节流总结、使用、具象化理解
防抖(Debouncing)和节流(Throttling)都是在处理频繁触发的事件时,用于优化性能和避免过多资源消耗的技术。它们的应用场景和原理略有不同。
1. 防抖(Debouncing):
在防抖中,事件被触发后,如果在指定的时间间隔内没有再次触发,才会执行相应的操作。如果事件在规定时间内再次触发,则重新计时。
实现原理:
  1. 设定一个等待时间(例如300毫秒)。
  2. 当事件触发时,启动计时器。
  3. 如果在等待时间内再次触发事件,则重新计时。
  4. 如果计时器完成,表示事件没有在规定时间内再次触发,执行相应的操作。
实际运用场景:
  • 输入框输入搜索:在用户输入完成后的短暂延时后再执行搜索操作,避免每次输入都触发搜索请求。
  • 窗口大小调整:在调整窗口大小时,防止过于频繁触发resize事件。
防抖具象化:
其实防抖就是你打英雄联盟的回城,每次你按B回去,你再按一次B就会打断前面一次的回城,他只会执行你最后一次的操作,这样是不是就很好理解了
2. 节流(Throttling):

在节流中,事件被触发后,无论触发的频率有多高,只会在规定的时间间隔内执行一次相应的操作。

实现原理:
  1. 设定一个执行间隔(例如300毫秒)。
  2. 当事件触发时,如果距离上次执行的时间超过了设定的执行间隔,就执行相应的操作。
  3. 如果触发的频率高于设定的执行间隔,就忽略这次触发。
实际运用场景:
  • 滚动事件:在处理滚动事件时,限制事件处理的频率,防止滚动时过多的计算和渲染。
  • 鼠标移动:在处理鼠标移动事件时,限制事件处理的频率,防止过多的计算和更新。
节流具象化:
其实节流就是你打英雄联盟的技能,每次你释放完技能,在你技能的CD时间,这个技能都无法被再次释放,只有等CD转好了,才可以再次使用,这样是不是就很好理解了
总结:
  • 防抖适用于在一系列连续触发的事件中,只关心最后一次触发的结果。
  • 节流适用于频繁触发的事件,限制其处理的频率,保证在一定时间内只执行一次操作。
2.防抖节流代码实战
2.1防抖实战以及详解
 // 防抖函数 要求
    // 当持续触发事件,一定时间内没有再触发事件,事件处理函数才会再执行一次
    // 当设定的事件来到之前,有一次触发了事件,就重新开始延时
    var input = document.querySelector('#input')
    // 防抖函数
    function debounce(delay) {
      // 让timer一直存储在内存中
      let timer
      return function (value) {
        //我们要想清除这个timer,就必须让他一直保存在内存中,
        // 如果不想打印之前的结果,就必须清除以前触发的定时器
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log(value);
        }, delay)
      }
    }
    // 这里是先调用外层函数,传入1000的时间值
    var debouncefunc = debounce(1000)
     // 在键盘抬起的时候,一秒之后打印出结果,但是如果我再次输入,那么就清除上一步 ,只打印这一步的结果
    input.addEventListener('keyup', (e) => {
      // 现在的debouncefunc就相当于 return的内部函数 
      // 这个时候传入value的值再打印
      // 当我们输入了下一次的值的时候,就是再次调用这个内层函数的时候
     debouncefunc(e.target.value)
    })

2.2节流实战以及详解
  <script>
    // 这个节流函数 关键的点其实 是在于函数的执行顺序
    // 我们分析一下
    // 定义一个flag为true,当页面滚动的时候,如果flag为 true 执行 setTimeout
    // 接下里执行的并不是console.log('hello');,而是 flag = false,
    // 当flag为false,那么setTimeout不再执行,此时我们需要让flag为 true,这个时候setTimeout可以执行了
    // 但是,他有0.5s的延迟,也就是说,在这0.5s之中,无论你怎么操作,他都不会执行
    // 等执行完flag = false之后,再执行console.log('hello');flag = true
    let flag = true
    window.onscroll = () => {
       if(flag){
         setTimeout(() => {
           console.log('hello');
           flag = true
         },1000)
       }
       flag = false
       console.log(1);
    }
  </script>

节流函数的封装
window.onscroll = closeFlows(function() {
  console.log(111);
},500)
function closeFlows(fn,delay) {
   let flag = true
   return function(){
     if(flag){
       setTimeout(() => {
         fn()
         flag = true
       },delay);
     }
     flag = false
   }
 }

好了,看到这里是不是对防抖节流都有了一个更加深刻的了解呢。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值