防抖与节流

文章介绍了前端开发中常用的性能优化技巧——防抖与节流。防抖技术常用于搜索框输入事件,确保在持续触发时只执行最后一次操作,例如回城效果,被打断则重新计时。而节流则适用于限制操作的频率,如游戏中的平A效果,保证在一定时间内只执行固定次数,如提交按钮的点击事件。实现这两种技术通常涉及setTimeout、clearTimeout、闭包以及对外部变量的管理。
摘要由CSDN通过智能技术生成

最近看了一个前端防抖与节流的文章,通俗易懂。
一下是我的理解:
防抖:触发最后一次回城效果,在指定时间内再次触发则重新计算时间。英雄联盟回程效果,回城被打断则重新在等待6秒回城效果。多用于搜索输入事件。
回城 setTimeout()方法
打断回城:clearTimeout()方法
1创建闭包 。
2外部函数携带两个参数
3外层函数 创建一个标记用来存放定时器的返回值。
4 return 内层函数。
5 内层函数 写清除 上次事件及时间。
6内层函数又创建新的setTimeout()放入事件。

节流:触发第一次平A效果,在指定时间内只可以触发一次效果,英雄联盟平A效果,规定一秒中看几刀,哪怕鼠标点击再多此,也只触发规定时间规定几次平A。多用于提交按钮事件。

防抖与节流 回调函数 传参 事件和规定时间
1创建闭包
2外部函数携带两个参数。
3外层函数 创建一个为false的变量。
4 return 内层函数。
5内层函数 判断上次外层函数变量是否为true。
6如为true说明上次事件还未结束直接return。
7如果为false 则进入else判断语句 设置外层变量为true。
8将参数函数传入 setTimeout(),切 函数this指向为 apply(this,arguments),外层变量设为false。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值