这篇节流学不会,我回家养猪仔

102 阅读1分钟

R-C.jpg

工作场景

工作中有遇到么:产品要说下单按钮连续点击,下了很多个单, 要做防暴力点击,满足他,上--->节流

代码思路

利用延时器,业务代码在延时器中,存在延时器就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)
    }

效果图

节流.gif

防抖总结

规定时间内,频繁触发的事件,只执行第一次如上场景,频繁点击下单,真正调下单接口是第一次点击

场景总结

  • 频繁事件 快速点击(防暴力点击)

王者荣耀场景

节流:类似于王者荣耀的技能冷却,点了之后一段时间再次点击是无效的。