防抖节流

简介: 笔记

防抖:

定义:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。

实现效果:如果短时间内大量触发同一事件,只会执行一次函数。

如何实现:利用setTimeout()和clearTimeout()

 

节流:

定义:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。

实现效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。

如何实现:利用setTimeout()和clearTimeout()


差距:

防抖:过了时间才会触发第一次

      常用于:搜索框input事件、页面resize事件、拖动滚动条事件等

                   为什么:因为都是只需要最终值的事件

节流:第一次触发过后 过了时间才会触发第二次

      常用于:按钮、鼠标移动事件等

                   为什么:需要先触发一次


目录
相关文章
节流
【10月更文挑战第17天】
|
6月前
节流、防抖
节流、防抖
41 2
|
6月前
|
前端开发 UED
关于防抖和节流的理解
防抖和节流是前端开发中常用的两种性能优化技术。
35 0
防抖&节流
防抖&节流
115 0
什么是防抖和节流,怎么实现一个防抖和节流?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
|
JavaScript 前端开发
节流与防抖
节流与防抖
49 0
|
JavaScript 前端开发
什么是防抖和节流?如何实现防抖和节流?
防抖(debounce)和节流(throttle)是 JavaScript 中常用的两种性能优化方法。
|
前端开发 JavaScript
关于防抖和节流我所知道的
关于防抖和节流我所知道的
58 0