day22

防抖

事件被频繁触发，在规定的时间内一直触发函数，会重新计算时间，直到达到时间，函数才会执行最后一次执行函数的最后一次代码

var input = document.querySelector('input');
input.oninput = debounce(function(){
    console.log(this.value)
},1000);
function debounce(fun,wait){
    let timer = null;
    return function(){
        if(timer!=null){
            clearTimeout(timer)
        }
        var that = this;
        timer = setTimeout(function(){
            fun.call(that)
        },wait)
    }
}

节流

每隔一段时间函数只会执行一次，限制事件执行的频率

window.onscroll = throttle(function(){
    alert('我被调用了')
},2000)
function throttle(fun,wait){
// 定义一个变量控制定时器执行的频率
    let id;
    return function(){
        if(!id){
            id = setTimeout(function(){
                fun();
                // 为了持续等待wait事件执行定时器一次
                id = null;
            },wait);
        }
        // 限制事件执行频率
    }
}