防抖和节流,概念、怎么实现

本文介绍了防抖和节流两种常见的前端技术,用于处理高频事件,以避免性能下降和减轻后端压力。防抖在输入停止后执行,适用于搜索提示等场景;节流则限制在特定时间段内执行一次,适合窗口调整等操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.概念

防抖:某一高频事件不断被触发时,仅在最后一次真正执行事件处理代码。

n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时

防抖应用场景

输入框中频繁的输入内容,搜索或者提交信息

频繁点击按钮或者出发某个时间

监听浏览器滚动事件,完成某个事件

浏览器的resize时间

手机号,邮箱验证输入检测

节流:某一高频事件被触发时,确保在每一个特定的时间段内被执行一次。

节流应用场景

用户频繁点击按钮操作

鼠标移动事件

监听页面的滚动事件

n 秒内只运行一次,若在 n 秒内重复触发,只有一次执行

相似点:都是为应对事件持续频繁发生,造成前端性能下降或对后端服务造成的压力。

区别:节流会不断的触发,而防抖仅在最后一次触发。防抖适用于,如搜索输入框提示,仅在输入停止后进行一次提示更新,以减少后台压力。节流适用于,如窗体以拖动的方式调整大小,在每次特定的时间片结束后触发一次窗体大小调整。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值