JavaScript中防抖和節(jié)流的區(qū)別及適用場景
前言
防抖和節(jié)流，這個(gè)在我們的前端生涯中，這兩個(gè)名詞肯定不陌生，甚至經(jīng)常被人問起：
- 兩者有什么區(qū)別？
- 分別用于什么場景？
ps：這就是高頻的面試題了吧！
防抖
防抖是什么呢？
形象的的說就是：防止抖動(dòng)（防抖函數(shù)內(nèi)心獨(dú)白：“你就抖動(dòng)吧！等你不抖動(dòng)了，我們在進(jìn)行下一步”）
例如
一個(gè)搜索輸入框， 用戶不停的進(jìn)行輸入（這個(gè)時(shí)候就是抖動(dòng)的過程）， 等用戶輸入停止之后，再觸發(fā)搜索。
代碼演示
function debounce(fn, delay = 200) {
let timer = 0
return function() {
// 如果這個(gè)函數(shù)已經(jīng)被觸發(fā)了
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments); // 透傳 this和參數(shù)
timer = 0
},delay)
}
}
節(jié)流
節(jié)流：節(jié)省交互溝通。
形象的的說就是：no！no！no！一個(gè)一個(gè)來，按照時(shí)間節(jié)奏來！插隊(duì)禁止！
例如
drag（拖動(dòng)）事件或者 scroll（滾動(dòng)） 期間觸發(fā)某個(gè)毀掉，要設(shè)置一個(gè)時(shí)間間隔。這時(shí)候就不能使用防抖了，為什么呢？
防抖是拖拽或者滾動(dòng)結(jié)束之后才返回回調(diào)，但是我是需要在過程中進(jìn)行觸發(fā)回調(diào)，但是又不需要那么的頻繁；這時(shí)候就使用節(jié)流函數(shù)，每隔一定的時(shí)間進(jìn)項(xiàng)觸發(fā)就好了！
代碼演示
// 節(jié)流函數(shù)
function throttle(fn, delay = 200) {
let timer = 0
return function () {
if(timer){
return
}
timer.setTimeout(() =>{
fn.apply(this, arguments); // 透傳 this和參數(shù)
timer = 0
},delay)
}
}咋一看，怎么和防抖函數(shù)好像怎么這么像？
區(qū)別僅僅在：
防抖：
if(timer){
clearTimeout(timer)
}節(jié)流：
if(timer){
return
}他們在定時(shí)器已經(jīng)有任務(wù)的時(shí)候的操作的不同。在我們上面介紹了防抖和節(jié)流的概念之后，大家應(yīng)該都懂了。
防抖函數(shù)在每一次都有內(nèi)容后進(jìn)行清除是為了保證當(dāng)前執(zhí)行的函數(shù)就是當(dāng)前規(guī)定的時(shí)間內(nèi)執(zhí)行的最后一次操作
if(timer){
clearTimeout(timer)
}節(jié)流函數(shù)如此操作是為了保證，在規(guī)定的時(shí)間內(nèi)只會(huì)執(zhí)行一次這個(gè)操作，這就是兩個(gè)函數(shù)從代碼上看到的不同
if(timer){
return
}到此這篇關(guān)于JavaScript中防抖和節(jié)流的區(qū)別及適用場景的文章就介紹到這了,更多相關(guān)JS防抖和節(jié)流 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用bootstrapValidator驗(yàn)證UEditor
這篇文章主要為大家詳細(xì)介紹了利用bootstrapValidator驗(yàn)證UEditor,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JS簡單實(shí)現(xiàn)移動(dòng)端日歷功能示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)移動(dòng)端日歷功能的方法,涉及javascript針對日期與時(shí)間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12
淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問題解決思路
下面小編就為大家?guī)硪黄獪\析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問題解決思路。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤功能的示例代碼
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)幸運(yùn)大轉(zhuǎn)盤功能，參與用戶點(diǎn)擊抽獎(jiǎng)便可抽取輪盤的獎(jiǎng)品，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-03-03
一些收集整理的JS 整理出一些收集的JS代碼，在這里向所有原作者致敬。2010-02-02
javascript每日必學(xué)之循環(huán)，本文的主要內(nèi)容就是循環(huán)，死循環(huán)時(shí)進(jìn)行bug調(diào)式，感興趣的小伙伴們可以參考一下2016-02-02
如何清除IE10+ input X 文本框的叉叉和密碼輸入框的眼睛圖標(biāo)
從IE 10開始，type=”text” 的 input 在用戶輸入內(nèi)容后，會(huì)自動(dòng)產(chǎn)生一個(gè)小叉叉（X），方便用戶點(diǎn)擊清除已經(jīng)輸入的文本，下面通過本文給大家介紹下如何清除IE10+ input X 文本框的叉叉和密碼輸入框的眼睛圖標(biāo)2016-12-12
這篇文章主要介紹了使用JavaScript腳本判斷網(wǎng)頁是否在微信中被打開的方法,在各種使用微信參加活動(dòng)的移動(dòng)版頁面上經(jīng)?？梢杂玫?需要的朋友可以參考下2016-03-03
JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03