扎实基础篇—–浅析防抖和节流

前言

防抖和节流函数,小伙伴们陌生吗?最近在公司经常听到防抖啦,节流啊,这些现在是实际开发项目中的“标配”!在长期的耳濡目染
之下,我也就试着去好好了解了一番!在最近的实际开发中,刚刚好也用到了。

认识一番

  • 防抖

    • 什么是防抖(debounce)?

      按我的理解的话来说,当我们需要执行某一动作的时候,这个动作可能会重复多次执行,这样的结果可能会要卡死了,严重影响性能,防抖就是当我们频繁触发,直到最后一个触发动作完成之后的第n秒才执行一次。

    • 常见应用场景

    • 用户需要不断的输入值,比如填写input表单验证或者在搜索框要输入一些内容。
    • 用户不断地进行tab切换页面操作时。
    • 原理和实现

      防抖原理就是:事件连续触发之后,只响应在一定的时间之内最后一次触发的这个事件,以这个最新事件为准;如果在这一定时间之内又重新触发事件,那就会重新计算时间,以当前在这个一定时间内的最新事件为准。(是不是有点绕,那就直接来看看实现代码吧!)

         function  debounce(fn,delay) {
         let timer;
         return function () {
             var context = this; //保存当前this指向当前对象
             var args = arguments;  //获取隐式传入的参数
             clearTimeout(timer);
             timer = setTimeout(function () {
                 fn.apply(context, args);
             }, delay);
          }
         }
      

    在实际应用中,只需要调用一下这个函数就可以了,比如在最近做的input框输入要进行搜索,就可以做个防抖,就是让用户输入完成之后再触发搜索事件,这样会大大提升性能,其实看代码不难理解,一直说的防抖函数,其实就是利用定时器设置延时,一定时间之后再触发接下来要执行的事件。(换句话说也就是,在一定时间期限内,只会执行一次事件处理函数)。

  • 节流

    • 什么是节流(throttle)?

      节流理解起来,其实可以说是‘节制执行’,举个常见例子来说就是,一个水龙头如果一直开着就会源源不断的流出水来,这就好比是我们的代码在一直不断地执行,这样对资源来说是一种浪费,我们就需要通过节流来把水龙头拧紧一点点,让流水的频率降低,但是,每一段时间内都能滴下水来,从而节省了资源。这样看来,节流是不是好像一个开关呢?

    • 常见应用场景

    • 滚动上拉加载,滚动下拉刷新。
    • oversize,mousemove ,mousehover。
    • 还有拖拽事件等等。
    • 原理和实现

      节流原理就是:在连续触发一个事件时,每隔一段时间就会去执行某一个函数,和防抖不同的是,不是要等待某个时间去执行一次函数。来看看基本的实现代码吧!

         function  throttle(fn,delay) {
         let timer = null;
         return function () {
             var context = this; //保存当前this指向当前对象
             var args = arguments;  //获取隐式传入的参数
             if(timer == null){
                 timer = setTimeout(() => {
                     fn.apply(context,args) 
                 }, delay);
             }
          }
         }
         
      

    这看起来,节流更像是一个‘定时器’,每次执行时,又会重新触发设置一个定时器。在我们平时开发中用到节流最多的就是类似监听滚动条那种,滑到某个位置就会触发相应的事件,有兴趣的小伙伴可以尝试着去了解一番番看看!

小结

防抖和节流看起来是那么相似,他们的目的全是用来做性能优化的;但他们的原理是不一样的,简单来概括一下两者区别:

防抖将多次执行变为只执行一次;节流将多次执行变为每隔一段时间执行。


关于防抖和节流,这是我在最近实际项目中用到了,所以来有心总结一番,加深理解。也希望能帮到小伙伴来理解,毕竟这也是高频面试题之一啦。当然,如果有什么好的意见和建议,欢迎小伙伴们来提出和指正,来一起交流,一起进步,一起加油~~~前端漫漫长途,我们一直在路上,持续更新ing…

https://juejin.im/post/5e141d57e51d45413b7b7db2

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论