前端js节流

节流

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

eg：在我们用搜索框的input事件做异步请求实现根据用户输入的字符展示出以该字符开头的数据时，发现事件触发的频率太高了！此时又不能像节流那样一直输入就一直不提示，我们需要的是在触发了一次之后，要间隔一段时间后才再次触发。这样就可以用节流来优化这种场景。

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           return false 
       }
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
document.getElementById('input').addEventListener('keyup',throttle(()=>{console.log('throttle')},300))

这里借助setTimeout和一个状态位valid来表示当前函数是否处于工作状态就简单的简单了实现节流。此时，搜索框就实现了正常频率的根据用户输入的字符展示出以该字符开头的数据。