防抖与节流

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。

场景：搜索框输入关键字，实时请求后台获取结果。

function func(context) {
    console.log(context);
}
function debounce(fn, delay) {
    let timer = null;
    return (args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(args);
        }, delay)
    }
}
let debounceFunc = debounce(func, 500);
document.getElementById('input').addEventListener('keyup', function(e){
    debounceFunc(e.target.value)
});

节流：当连续触发某个事件时，运用节流可以保证在一段时间内，只触发一次事件。

场景：监听滚动事件，做相应操作，比如：懒加载。

function throttle(fn, delay){
    let last, timer;
    return (args) => {
        let now = +new Date();
        if(last && now < last+delay) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn(args);
            }, delay)
        } else {
            fn(args);
            last = now;
        }
    }
}
let throttleFunc = throttle(func, 1000);
document.getElementById('input').addEventListener('keyup', function(e){
    throttleFunc(e.target.value)
});