使用setTimeout 闭包实现节流和防抖

节流

在x秒内，无论调用多少次这个函数，它只会在第一次调用结束后才能重新调用

实现

function throttle(fn,delay){
    let timeout = undefined;
    return function(){
        if(timeout !==undefined){
            return;
        }

        timeout = setTimeout(() => {
            timeout = undefined;
            fn.apply(this,arguments);
        }, delay);
    }
}

防抖

在x秒内，多次调用，只会执行最后一次。

实现

//防抖
function debounce(fn,delay){
    let timeout = undefined;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            timeout = undefined;
            fn.apply(this,arguments);
            
        }, delay);
    }
}

使用例子

function bind(id,wrapper){
    
    document.getElementById(id).onclick = wrapper(function() {
        console.log(this);
        this.querySelector('span').innerText++
        console.log(this);
    }, 500)
}
bind('b1',debounce);
bind('b2',throttle);

demo页面ywhblog.top/test/test3.html

Yuan