防抖和节流

防抖和节流：

在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。针对此类快速连续触发和不可控的高频触发问题，debounce 和 throttling 给出了两种解决策略

节流

debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行，前缘debounce，是在周期开始时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行

防抖

节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。 节流策略也分前缘和延迟两种。与debounce类似，延迟是指 周期结束后执行动作，前缘是指执行动作后再开始周期

//防抖
function debounce(func,delay){
    let timer = null;
    return (...args)=>{
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            func(...args);
        },delay)
    }
}



// 节流时间戳版本
function throttle(func,delay) {
    let prev = 0;
    return (...args)=>{
        let now = +new Date;
        if(now - prev >= delay) {
            func(...args);
            prev = now;
        };
    }
}

//节流，定时器
function throttle(func,delay){
    let timer = null;
    return (...args)=>{
        if(!timer) {  //timer为null进入
            timer = setTimeout(()=>{
                func(...args);
                timer =null;
            },delay)
        }
    }

}