Js中防抖与节流,函数防抖和函数节流

本文介绍了JavaScript中的函数防抖(debounce)和函数节流(throttle)概念及其应用场景。防抖技术用于限制函数在n秒内只能执行一次,而节流则保证在规定时间内至少执行一次。文章通过实例解析了防抖和节流的实现方式,包括手写防抖和节流函数,并讨论了它们在前端开发中的用途,如控制滚动事件、文本编辑器实时保存和输入框搜索请求等场景。
摘要由CSDN通过智能技术生成

防抖的概念

防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

前端开发中,常见的事件如,onresizescrollmousemove ,mousehover 等会短时间内多次触发(频繁触发),不做限制的话可能一秒执行几百次,

在这些函数内部如果还执行了其他函数,尤其是执行了操作 dom 的函数的话(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,

还会降低程序运行速度,甚至造成浏览器卡死、崩溃。

除此之外,短时间内重复调用 ajax 不仅会造成数据关系的混乱,还会造成网络拥堵,增加服务器压力等问题。

防抖代码实现

防抖的关键是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。
如果方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。
若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。

注意:当你一直连续不断的点击超过你设置的时间,并且只有第一次点击有效,这不是bug,这是概念问题,注意看下面标红这部分,

防抖又叫为函数防抖ÿ

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值