前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >防抖节流

防抖节流

原创
作者头像
肥晨
发布2023-02-16 10:15:36
4620
发布2023-02-16 10:15:36
举报
文章被收录于专栏:农民工前端农民工前端

防抖:

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

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

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

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

节流:

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

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

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

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

差距:

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

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

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

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

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

为什么:需要先触发一次

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档