「JavaScript」手写简易节流函数和防抖函数

节流函数

简单解释

单位时间内，频繁触发事件，只执行一次（待前一次定时器内的回调函数执行完毕之后才能添加下一个定时器宏任务）

代码示例

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

function handle(){
    console.log('!');
}

window.addEventListener("mousemove", throttle(handle, 500));

防抖函数

简单解释

单位时间内，频繁触发事件，只有最后一次触发事件添加的定时器宏任务有效（通俗来讲，如果一直触发事件，则定时器一直刷新归零，直到不再触发事件，定时器才能开始正常计时，计时完毕后将回调函数添加到任务队列当中）

代码示例

function debounce(func, wait){
    let timer;
    return function(){
        let args = arguments;

        if(timer) clearTimeout(timer);
        timer = setTimeout(()=>{
            func.apply(this, args);
        }, wait);
    }
}

function handle(){
    console.log('!');
}

window.addEventListener("mousemove", debounce(handle, 1000));