防抖与节流的原理和封装

简介: 防抖与节流的原理和封装

防抖- debounce


防止抖动 防止事件在短时间内频繁被触发,用户停止输入后,延迟超过500ms时,才去搜索此时的String,这就是防抖。


*原理:将若干个函数调用合成为一次,并在给定时间过去之后仅被调用一次。


封装

20210719214852660.png

20210719215228770.png


调用

2021071921504978.png


节流- throttle


我们不想用户一味的输入,而是给用户一些搜索提示,在一定的时间内只触发一次 ,所以在当中限制每过500ms就查询一次此时的String,这就是节流。


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


封装

20210719215205761.png

20210719215240915.png


 


相关文章
节流函数和防抖函数的区别和应用
节流函数和防抖函数的区别和应用
41 0
|
前端开发
封装防抖函数和节流函数
封装防抖函数和节流函数
78 0
|
26天前
|
前端开发
防抖和节流的区别,实现和用处。
防抖和节流是优化高频事件处理的两种技术。防抖确保在一系列连续事件后仅执行最后一次操作,如搜索输入完成后再发送请求;节流则保证在设定时间内仅执行一次操作,适用于滚动加载等场景。两者通过限制回调函数的执行频率,有效提升前端性能。示例代码展示了如何实现这两种技术。
34 2
|
2月前
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
监控 前端开发
前端经典面试题 | 理解 节流 和 防抖(后附手写节流\防抖)
前端经典面试题 | 理解 节流 和 防抖(后附手写节流\防抖)
什么是防抖和节流,怎么实现一个防抖和节流?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
面试官:防抖和节流的区别是啥?实现一个防抖和节流函数(一)
面试官:防抖和节流的区别是啥?实现一个防抖和节流函数(一)
|
UED
防抖和节流怎么做
防抖和节流都是为了控制代码执行频率,提高性能和用户体验。
39 0
|
前端开发
什么是防抖和节流?有什么区别?
什么是防抖和节流?有什么区别?
84 0