前端面試100問(3)
阿新 • • 發佈:2021-02-19
碼字不易,有幫助的同學希望能關注一下我的微信公眾號:Code程式人生,感謝!程式碼自用自取。
題目:
什麼是防抖和節流?有什麼區別?如何實現?
- 防抖
觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間
- 思路:
每次觸發事件時都取消之前的延時呼叫方法
function debounce(fn) {
let timeout = null; // 建立一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout); // 每當使用者輸入的時候把前一個 setTimeout clear 掉
timeout = setTimeout(() => { // 然後又建立一個新的 setTimeout, 這樣就能保證輸入字元後的 interval 間隔內如果還有字元輸入的話,就不會執行 fn 函式
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener ('input', debounce(sayHi)); // 防抖
- 節流
高頻事件觸發,但在n秒內只會執行一次,所以節流會稀釋函式的執行頻率
- 思路:
每次觸發事件時都判斷當前是否有等待執行的延時函式
function throttle(fn) {
let canRun = true; // 通過閉包儲存一個標記
return function () {
if (!canRun) return; // 在函式開頭判斷標記是否為true,不為true則return
canRun = false; // 立即設定為false
setTimeout (() => { // 將外部傳入的函式的執行放在setTimeout中
fn.apply(this, arguments);
// 最後在setTimeout執行完畢後再把標記設定為true(關鍵)表示可以執行下一次迴圈了。當定時器沒有執行的時候標記永遠是false,在開頭被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
更多關於前端的面試題內容關注我的公眾號:Code程式人生。
有微信小程式課設、畢設需求聯絡個人QQ:505417246
關注下面微信公眾號,可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號,請大家多多關注,謝謝