防抖和节流

防抖这个名字不知道谁起的，有点儿意思。 总而言之就是防止重复调用某一个函数导致负载压力大，给它延时，检测最后的最后的操作在执行，可以用在即时搜索的输入框啊，暴力点击的下一页上等等,可以用全局变量实现，也可以用闭包实现，闭包的小demo

<input id="testkeyevent"/>
function debounce(fn,wait) {
    let timer = null
    return function () {
        if(timer!=null){
            clearTimeout(timer)
        }
        timer = setTimeout(fn,wait)
    }
}
let input = document.getElementById('testkeyevent')
function search() {
    //请求
}
input.onkeydown = debounce(search,300)
//当键盘按下后300毫秒内没有键盘按下，才会执行search函数

节流，很好理解，就是控制执行的数量，装一个阀门，就是你无论怎样操作，都会定时执行，就像你亚索的按的再快也只是冷却没结束它也只执行一次，可以用在比如上拉加载或点击者刷新，频繁的请求徒增压力，哪怕你把屏幕滑破，劳资也是两秒一次请求

<button id="btn"/>
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //冷却时间
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
function ref() {
    //请求
}
let btn = document.getElementById('btn')
btn.onclick = throttle(ref,2000)