防抖与节流

防抖

长时间触发同一事件，该事件方法只执行一次。

function debounce(func,wait){
    let timeout = null;
    return function(){
        // 使this指向不变并能获取到e参数
        let context = this;
        let args = arguments;
        if(timeout){
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            func.apply(context, args);
        },wait);
    }
}

function a(e){
    console.log('im a');
    console.log(e);
}

window.onmousemove = debounce(a,1000);

节流

长时间触发同一事件，该事件方法每间隔一定时间执行一次。

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args);
            }, wait);
        }
    }
}

function a(e){
    console.log('im a');
    console.log(e);
}

window.onmousemove = throttle(a,1000);

代码转自这里