防抖和節流

防抖和節流

這個也是面試的時候常常考的哦！筆者如今簡單的說一下(是真的簡單說一下)。。。 😒

防抖

防抖: 觸發一個事件，會把它延遲到n秒後執行。至於爲何叫防抖，本人不清楚。。。 😳 查看例子

function debounce(fn,time){
    var timer = null;
    return function(){
        clearTimeout(timer); //重點，要不斷清除上次的定時器
        timer = setTimeout(()=>{
            console.log('防抖')
            fn.apply(this,arguments)
        },time);
    }
}

節流

節流: 觸發一個事件，它只會在n秒內執行一次。查看例子

function throttle(fn,time){
    var bool = true;
    return function(){
        if(!bool) return;
        bool = !bool;
        fn.apply(this,arguments);
        console.log('節流');
        setTimeout(function(){
            bool = !bool;
        },time);
    }
}

總結

防抖和節流雖然在實現上不一樣，但均可以減小高頻事件的次數，達到一種優化的效果。 👍
若是你想更多的瞭解或者參與討論，請看這裏