工作场景
工作中有遇到么:产品要说下单按钮连续点击,下了很多个单, 要做防暴力点击,满足他,上--->节流
代码思路
利用延时器,业务代码在延时器中,存在延时器就return掉,等延时器执行完毕后,才开启延时器,不要打断 看不懂思路,看demo
HTML
<!-- onkeyup 事件在用户释放键时 调用fn -->
<input id="fname" type="button" value="下单" onclick="fn()">
JavaScript
var timeId = null; // 定义延时器ID
// debugger
function fn(params) {
if (timeId) {// 有延时器时,就返回
return
}
timeId = setTimeout(function(){
console.log('第一次点击后-->1秒后去调下单接口接口呀,这个1秒内只执行一次');
timeId = null
},1000)
}
效果图
防抖总结
规定时间内,频繁触发的事件,只执行第一次如上场景,频繁点击下单,真正调下单接口是第一次点击
场景总结
- 频繁事件 快速点击(防暴力点击)
王者荣耀场景
节流:类似于王者荣耀的技能冷却,点了之后一段时间再次点击是无效的。