资讯专栏INFORMATION COLUMN

理解节流和防抖

zebrayoung / 2912人阅读

摘要:所以针对此类事件则需要进行节流,或者防抖动处理。节流判断是否已空闲,如果在执行中,则直接函数节流二防抖对于一定时间段内的连续的函数调用,只执行一次原理其实就是一个定时器,当我们触发一个事件时,让这个事件延迟一会在执行。

在浏览器dom事件里面,一些事件会随着用户的操作不间断的触发,比如:为一个元素绑定拖拽事件,为页面绑定resize事件(重新调整浏览器窗口大小),页面滚动。如果dom操作比较复杂,还不间断的触发事件。这将会造成性能上的损失,导致浏览器卡顿,用户体验下降。

所以针对此类事件则需要进行节流,或者防抖动处理。

一、节流-throttle
在指定时间内,让函数只触发一次。

规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间,触发了多次的回调函数,那也只有一次能生效,其余的作废。

举例:

假设,我们观察的总时间为10秒钟,规定1秒作为一次事件的最小间隔时间。

如果触发事件的频率是 0.5s/次

因为控制了最多一秒一次,频率为0.5s/次,所以每一秒钟就有一次事件作废。最终控制成1s/次

实现:

第一种:采用loadsh库的_.throttle()函数
第二种:滑动为例,,我们滚动页面时,为使用节流函数之前,频繁触发了多次的函数调用,函数调用中涉及到了dom操作或者接口请求的话,那将会
进行无数次的函数调用。
采用之后,时间间隔内(这里设置300ms)多次触发了函数,只执行了一次。




    节流
    



    



二、防抖-debounce
对于一定时间段内的连续的函数调用,只执行一次

原理:其实就是一个定时器,当我们触发一个事件时,setTimeout让这个事件延迟一会在执行。如果在这个时间段内又触发了这个事件。那么我们就先clear掉这个定时器,在重新setTimeout一个新定时器来延迟执行。

多次调用之执行一次:

同样这边的例子是

假设,我们观察的总时间为10秒钟,规定1秒作为一次事件的最小间隔时间。

如果触发事件的频率是 0.5s/次

因为始终没法等一秒钟就被再次触发了,所以最终没有一次事件是成功的。

实现:

第一种:采用loadsh库的_.debounce()函数
第二种:滑动为例,,我们滚动页面时,为使用防抖函数之前,频繁触发了多次的函数调用,函数调用中涉及到了dom操作或者接口请求的话,那将会
进行无数次的函数调用。
采用防抖之后,只有在停止滑动后,定时结束才执行函数处理逻辑。



    防抖
    


    

三、区别

节流:不管事件触发的多频繁,都会保证在规定的时间内一定会执行一次真正的事件处理函数。

防抖:只在最后一次触发事件后才执行一次函数

参考:

https://blog.csdn.net/crystal6918/article/details/62236730

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

https://www.jianshu.com/p/b73c2acad696

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94681.html

相关文章

  • JS之节流防抖

    摘要:节流在指定时间之内,让函数只触发一次。防抖对于一定时间段的连续的函数调用,只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理,在里,实现起来更加复杂,但是背后的原理核心就是上边代码写的。 概述 在平时的开发中,经常会听到两个差不多很相近的词。节流(throttle)和防抖(debounce)。这是两个类似又有些不同的优化方案。 节流:在指定时间之内,让函数只触发一次。 防...

    fevin 评论0 收藏0
  • JavaScript 函数节流 throttle 防抖 debounce

    摘要:今天和别人聊到函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助。防抖实现顺利,但是两个节流方法的执行结果存在差异。 今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助。 节流 - 频繁操作,间隔一定时间去做一件事 举例说明:假定时间间隔为 500ms,频繁...

    mmy123456 评论0 收藏0
  • 函数节流防抖

    摘要:当第二次调用该函数时,它会清除前一次的定时器并设置另一个。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析 前言 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresi...

    didikee 评论0 收藏0
  • 函数节流防抖

    摘要:当第二次调用该函数时,它会清除前一次的定时器并设置另一个。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析 前言 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresi...

    huaixiaoz 评论0 收藏0
  • 函数节流防抖

    摘要:当第二次调用该函数时,它会清除前一次的定时器并设置另一个。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析 前言 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresi...

    CHENGKANG 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<