函数限流实现

1,438 阅读1分钟

函数限流解释: 指定时间大量重复触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效

思路: 我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。

实现: 这里借助 setTimeout来做一个简单的实现,加上一个状态位 flag来表示当前函数是否处于工作状态.

HTML CODE

<input type = "text" id = "root" />

**JS CODE **

        function throttle(fn) {
            let flag = true
            return function () {
                if (!flag) {
                  return false
                }
                
                flag = false
                setTimeout(() => {
                    fn() 
                    flag = true;
                },1000)
            }
        }

        function sayOk(){
            console.log("throttle success");
        }

        const ele = document.getElementById("root")
        ele.addEventListener("input" , throttle(sayOk))