2020-09-20

防抖：在指定时间内，不重复触发事件才会执行某函数，会延迟执行函数

节流：触发事件后，指定事件内不再响应该事件

以拖动浏览器屏幕为例子，在屏幕宽度发生变化时，打印当前屏幕宽度，但是屏幕拖动时，触发回调频率过高，当函数处理逻辑较复杂时，有可能造成页面卡顿。

function resize() {
     console.log(window.innerWidth);
}
window.onresize = resize;

 

在上述例子中，假设防抖和节流的事件都设置为200ms，那防抖的实现细节在于：

当屏幕宽度发生变化时，会触发resize回调，但是不会执行里面的打印，在停止拖动200ms后，函数内容才会被触发，所以拖动一次只打印了一次

 

而节流的实现细节在于：

当屏幕宽度发生变化时，立即触发函数执行，并进入冷却，等待200ms冷却期过后，再重新执行函数，以此类推，在一直拖动屏幕的期间，每个200ms打印一次

 

防抖函数：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer)
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay)
        }
    }
}

 

节流函数

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           return false 
       }
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

// window.onresize = resize;
// window.onresize = debounce(resize, 200);
window.onresize = throttle(resize, 2000);