節流和防抖

這是前端面試中比較常見的一個問題，可能會讓你現場手寫。節流和防抖都是用來控制某些函數的調用頻率。舉個例子，在窗口resize的時候，因爲可視區變大，咱們可能須要向服務器請求更多內容來填充可視區。但可視區變大的過程當中，resize事件會被觸發屢次...每次觸發都去請求一次的話沒有必要...這時就須要節流防抖來作控制前端

function resize(e) {
    console.log("窗口大小改變了");
}
window.addEventListener('resize', resize);
複製代碼

節流（throttle）

當resize事件被觸發後，指定時間內不容許再次觸發，面試時要是遇到手寫的話，可能會問到幾種實現方式java

1. 時間戳版

function throttle(func, delay) {
    var last = 0;
    return function () {
        var now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距離上次調用的時間差不知足要求哦");
        }
    }
}
複製代碼

2. 定時器版

function throttle(func, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            console.log("上一個定時器還沒有完成");
        }
    }
}
複製代碼

不管上述哪一種寫法，節流的意思就是函數在一段時間內的屢次調用，僅第一次有效。面試

因此節流就像是一個看門大爺，每一段時間它只會放一我的進去服務器

防抖（debounce）

防抖和節流不一樣的地方在於，函數在一段時間內的屢次調用，僅使得最後一次調用有效。markdown

function debounce(func, delay) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}
複製代碼

因此防抖就像是PK賽裏的待定區，下一個待定的人會把上一個待定的人踢出局 app

你學會了嗎？點贊、收藏的逢考必過，升職加薪，走向人生巔峯函數

據說在小破站裏關注大帥老猿，能夠第一時間看到更多動畫視頻教程喲oop