js实现防抖debounce和节流throttle

多次触发事件,但是只在触发停止后一段时间内才触发一次,叫做 防抖; 每隔一段时间触发一次叫节流
举例:
在搜索框中输入,在输入停止200ms后执行搜索叫防抖;在输入过程中每隔2秒执行一次搜索叫做节流。是不是很好理解了~
实现代码:

// 防抖
function debounce(fn, time){
    let timer = null;
    return function(){ 发布文章
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, time);
    }
}
window.addEventListener('resize', debounce(() => {console.log('resize')}, 1000));
//节流
function throttle(fn, interval){
    let pre = new Date().valueOf();
    return function() {
        const cur = new Date().valueOf();
        if(cur - pre >= interval){
            pre = cur;
                        const args = Array.prototype.slice.call(arguments);
            fn.apply(this, args);
        }
    }
}
window.onresize = throttle(() => console.log('resize'), 2000);

你可能感兴趣的:(js实现防抖debounce和节流throttle)