防抖与节流函数

防抖

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

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的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次