文章目錄

• 一. 防抖
• • • 1. 什么是防抖
    • 2. 常見應用場景
    • 3. 代碼實現思路
• 二. 節流
• • • 1. 什么是防抖
    • 2. 常見應用場景
    • 3. 代碼實現思路
• 三. 面試總結
• • • 1. 防抖
    • 2. 節流

成都創新互聯公司自成立以來，一直致力于為企業提供從網站策劃、網站設計、成都網站設計、網站制作、電子商務、網站推廣、網站優化到為企業提供個性化軟件開發等基于互聯網的全面整合營銷服務。公司擁有豐富的網站建設和互聯網應用系統開發管理經驗、成熟的應用系統解決方案、優秀的網站開發工程師團隊及專業的網站設計師團隊。

---

一. 防抖 1. 什么是防抖

所謂的防抖就是指連續觸發事件但是在設定的一段時間內中只執行最后一次。
例如：設定1000毫秒執行，當你觸發事件了，他會1000毫秒后執行，但是在還剩500毫秒的時候你又觸發了事件，那就會重新開始1000毫秒之后再執行。

2. 常見應用場景

1. 搜索框搜索輸入
在我們在所搜框輸入時，不能每次輸入都觸發一次請求，這樣會非常的消耗系統性能，那么這時就可以用到防抖。
2.文本編輯器實時保存
在文本編輯器實時保存的應用場景下，不需要用戶每次輸入都進行一次保存，而是可以設置一個時間，多長時間后再去進行一個自動保存。

3. 代碼實現思路

如果面試官問我們防抖的代碼實現思路，那么我們可以回答利用定時器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onkeyup= function (){if (timerId !=null){clearTimeout(timerId)
	}
	timerId = setTimeout(()=
	console.1og('我是防抖')
	},1000)
}

在我們的實際開發中除了可以自己進行手寫還可以使用lodash進行實現，相關技術各位讀者朋友可以自行查閱相關文章。

二. 節流 1. 什么是防抖

就是指連續觸發事件但是在設定的一段時間內中只執行一次函數。
例如：設定1000毫秒執行，那你在1000毫秒觸發在多次，也只在1000毫秒后執行一次。

2. 常見應用場景

節流的引用場景比較多常見的有：
1.高頻事件例如快速點擊、鼠標滑動、resize事件、scroll事件
對于這類高頻的事件，我們可以設置一個時間，在設定事件內不管觸發多少次事件都不會觸發相應的業務邏輯代碼，只有這段時間結束后再進行下一輪執行
2. 下拉加載 視屏播放記錄時間
對于這一類，我們也可以設置一個時間，設定多少秒記錄一次，這樣就不會過多的損耗我們系統的性能。

3. 代碼實現思路

如果面試官問我們防抖的代碼實現思路，那么我們可以回答利用定時器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onmouseover= function (){if (timerId !=null){return
	}
	timerId setTimeout(()=>{console.log('我是節流)
	timerId = null
   },100)
}

在開發中對于節流除了我們手寫也可以使用lodash進行實現，相關技術各位讀者朋友可以自行查閱相關文章。

三. 面試總結 1. 防抖

單位時間內，頻繁觸發事件，只執行最后一次。

2. 節流

單位時間內，頻繁觸發事件，只執行一次。

你是否還在尋找穩定的海外服務器提供商？創新互聯www.cdcxhl.cn海外機房具備T級流量清洗系統配攻擊溯源，準確流量調度確保服務器高可用性，企業級服務器適合批量采購，新人活動首月15元起，快前往官網查看詳情吧

本文標題：前端面試常考|節流與防抖-創新互聯
URL地址：http://vcdvsql.cn/article32/iidpc.html

成都網站建設公司_創新互聯，為您提供定制網站、動態網站、全網營銷推廣、網站設計公司、響應式網站、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯