js防抖和節(jié)流

在進行窗口的resize纺涤、scroll译暂,輸入框內(nèi)容校驗等操作時,如果事件處理函數(shù)調(diào)用的頻率無限制外永,會加重瀏覽器的負擔,導致用戶體驗非常糟糕拧咳。此時我們可以采用debounce(防抖)和throttle(節(jié)流)的方式來減少調(diào)用頻率,同時又不影響實際效果骆膝。

函數(shù)防抖

函數(shù)防抖(debounce):當持續(xù)觸發(fā)事件時,一定時間段內(nèi)沒有再觸發(fā)事件阅签,事件處理函數(shù)才會執(zhí)行一次掐暮,如果設(shè)定的時間到來之前政钟,又一次觸發(fā)了事件路克,就重新開始延時养交。如下圖精算,持續(xù)觸發(fā)scroll事件時碎连,并不執(zhí)行handle函數(shù)灰羽,當1000毫秒內(nèi)沒有觸發(fā)scroll事件時破花,才會延時觸發(fā)scroll事件。


一起來實現(xiàn)個簡單的debounce~

防抖debounce代碼:

// 防抖
function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

當持續(xù)觸發(fā)scroll事件時座每,事件處理函數(shù)handle只在停止?jié)L動1000毫秒之后才會調(diào)用一次,也就是說在持續(xù)觸發(fā)scroll事件的過程中峭梳,事件處理函數(shù)handle一直沒有執(zhí)行。

函數(shù)節(jié)流

函數(shù)節(jié)流(throttle):當持續(xù)觸發(fā)事件時,保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)葱椭。節(jié)流通俗解釋就比如我們水龍頭放水,閥門一打開孵运,水嘩嘩的往下流,秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德治笨,我們要把水龍頭關(guān)小點驳概,最好是如我們心意按照一定規(guī)律在某個時間間隔內(nèi)一滴一滴的往下滴旷赖。如下圖顺又,持續(xù)觸發(fā)scroll事件時等孵,并不立即執(zhí)行handle函數(shù)稚照,每隔1000毫秒才會執(zhí)行一次handle函數(shù)俯萌。


函數(shù)節(jié)流主要有兩種實現(xiàn)方法:時間戳和定時器果录。接下來分別用兩種方法實現(xiàn)throttle~

節(jié)流throttle代碼(時間戳):
var throttle = function(func, delay) {            
  var prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {                    
      func.apply(context, args);                    
      prev = Date.now();                
    }            
  }        
}        
function handle() {            
  console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

當高頻事件觸發(fā)時绳瘟,第一次會立即執(zhí)行(給scroll事件綁定函數(shù)與真正觸發(fā)事件的間隔一般大于delay,如果你非要在網(wǎng)頁加載1000毫秒以內(nèi)就去滾動網(wǎng)頁的話糖声,我也沒辦法o(╥﹏╥)o)斤彼,而后再怎么頻繁地觸發(fā)事件蘸泻,也都是每delay時間才執(zhí)行一次琉苇。而當最后一次事件觸發(fā)完畢后悦施,事件也不會再被執(zhí)行了 (最后一次觸發(fā)事件與倒數(shù)第二次觸發(fā)事件的間隔小于delay并扇,為什么小于呢抡诞?因為大于就不叫高頻了呀(?▽?))穷蛹。
節(jié)流throttle代碼(定時器):

// 節(jié)流throttle代碼(定時器):
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

總結(jié)

函數(shù)防抖:將幾次操作合并為一此操作進行昼汗。原理是維護一個計時器肴熏,規(guī)定在delay時間后觸發(fā)函數(shù)顷窒,但是在delay時間內(nèi)再次觸發(fā)的話蛙吏,就會取消之前的計時器而重新設(shè)置。這樣一來鸦做,只有最后一次操作能被觸發(fā)励烦。

函數(shù)節(jié)流:使得一定時間內(nèi)只觸發(fā)一次函數(shù)泼诱。原理是通過判斷是否到達一定時間來觸發(fā)函數(shù)坛掠。

區(qū)別: 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁坷檩,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)却音,而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)矢炼。 比如在頁面的無限加載場景下系瓢,我們需要用戶在滾動頁面時,每隔一段時間發(fā)一次 Ajax 請求夷陋,而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景胰锌,就適合用節(jié)流技術(shù)來實現(xiàn)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末资昧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子格带,更是在濱河造成了極大的恐慌撤缴,老刑警劉巖叽唱,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屈呕,死亡現(xiàn)場離奇詭異棺亭,居然都是意外死亡虎眨,警方通過查閱死者的電腦和手機镶摘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門嗽桩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凄敢,“玉大人碌冶,你說我怎么就攤上這事贡未≈钟#” “怎么了俊卤?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵嫩挤,是天一觀的道長消恍。 經(jīng)常有香客問我岂昭,道長狠怨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮忠售,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘憎蛤。我一直安慰自己外傅,他們只是感情好俩檬,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著棚辽,像睡著了一般技竟。 火紅的嫁衣襯著肌膚如雪屈藐。 梳的紋絲不亂的頭發(fā)上榔组,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天估盘,我揣著相機與錄音瓷患,去河邊找鬼遣妥。 笑死擅编,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的爱态。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼境钟,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了慨削?” 一聲冷哼從身側(cè)響起洞渔,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎磁椒,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體浆熔,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡本辐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年医增,在試婚紗的時候發(fā)現(xiàn)自己被綠了慎皱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叶骨。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖忽刽,靈堂內(nèi)的尸體忽然破棺而出地梨,到底是詐尸還是另有隱情缔恳,我是刑警寧澤宝剖,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站万细,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纸泄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一聘裁、第九天 我趴在偏房一處隱蔽的房頂上張望雪营。 院中可真熱鬧衡便,春花似錦献起、人聲如沸镣陕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岂嗓。三九已至,卻和暖如春鹊碍,著一層夾襖步出監(jiān)牢的瞬間食绿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工公罕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人熏兄。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓树姨,卻偏偏與公主長得像摩桶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子帽揪,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容