防抖与节流函数

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始计时

function debounce(fn, delay) {
    let timer = null;
    return function(){if(timer) {clearTimeout(timer);
        }
        timer = setTimeout(() => {fn.apply(this, arguments);
        }, delay);
    };
}

节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数

function throttle(fn, delay) {
    let timer = null;
    return function() {if(!timer) {timer = setTimeout(() => {fn.apply(this, arguments);
                timer = null;
            }, delay)
        }
    };
}

应用

debounce

• search 搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

throttle

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次