我們用兩張圖表示什么是節(jié)流和防抖。

防抖

節(jié)流

由圖可見，防抖的意思是，當(dāng)用戶在一段時(shí)間內(nèi)連續(xù)頻繁的試圖執(zhí)行一個(gè)函數(shù)的時(shí)候，只有最后一次，函數(shù)被真正的執(zhí)行。節(jié)流的意思是，當(dāng)用戶在某一個(gè)時(shí)刻執(zhí)行了一次函數(shù)的時(shí)候，在一段時(shí)間 t 內(nèi)，再次執(zhí)行該函數(shù)都沒有作用。

下面，我們用實(shí)例，寫一個(gè)防抖和節(jié)流出來。

請(qǐng)先利用下面的命令安裝 jquery，在項(xiàng)目根目錄下執(zhí)行。

npm install jquery -save

在 body 里添加

<button id="btn1">btn1</button>

一、防抖

let id;$("#btn1").on('click',function(e){clearTimeout(id);id = setTimeout(function(){console.log('button clicked',id)},1000);})

這是一個(gè)最簡(jiǎn)單的防抖，但是，缺點(diǎn)是明顯的，一個(gè)臨時(shí)變量被放在 window 對(duì)象里面了，污染了全局變量空間。因此，我們想把這個(gè)變量寫成局部的，有經(jīng)驗(yàn)的同學(xué)一定知道，我們?cè)撚瞄]包了，既，使用柯理化函數(shù)的編程思想。事實(shí)上，上面的這個(gè)例子已經(jīng)是一個(gè)閉包了，因?yàn)樽钔鈱拥?id 接住了函數(shù)內(nèi)部 setTimeout 的返回值，因此這個(gè)函數(shù)的棧內(nèi)存是不會(huì)銷毀的。只是，我們的優(yōu)化方案需要在此基礎(chǔ)上再加一層。

本著這個(gè)思路，我們有：

function debounce(){let id;return function(){clearTimeout(id);id = setTimeout(function(){console.log('button clicked',id)},1000);}}var fn = debounce();$("#btn1").on('click',function(e){fn();})

首先，一個(gè)全局變量 fn 接住了 debounce 的一個(gè)返回值，閉包形成，debounce 內(nèi)部的 id 被保存住，因此，每次 fn 執(zhí)行的時(shí)候，它所用到的 id 都是一個(gè)，這和第一個(gè)例子當(dāng)中全局作用域上面的 id 是等價(jià)的，只不過，不會(huì)污染全局作用域。

防抖的原理是，如果用戶頻繁的點(diǎn)擊按鈕，上一次的 setTimeout 都會(huì)立刻被下一次清除，需要執(zhí)行的函數(shù)始終打不出來，只有最后一次沒人清除它，因此會(huì)被執(zhí)行。

二、節(jié)流

下面我們講節(jié)流，首先，我們還是利用全局作用域?qū)懸粋€(gè)簡(jiǎn)單的版本。

let time = new Date();$("#btn1").on('click', function (e) {let time1 = new Date();if (time1 - time > 2000) {console.log(time1 - time);time = time1;}})

同樣的，這套方法污染了全局作用域，因此，我們需要寫個(gè)閉包出來，保存局部變量。

function throttle() {let time = new Date();return function () {let time1 = new Date();if (time1 - time > 2000) {console.log(time1 - time);time = time1;}}}let fn = throttle();$("#btn1").on('click', function (e) {fn();})

節(jié)流的原理比防抖更簡(jiǎn)單，當(dāng)函數(shù)被成功的執(zhí)行過一次，本次成功執(zhí)行的時(shí)間會(huì)被記錄下來，那么當(dāng)用戶頻繁點(diǎn)擊按鈕的時(shí)候，這些次記錄的時(shí)間距離上次成功執(zhí)行的時(shí)間太短，小于閾值，因此不被執(zhí)行。

請(qǐng)各位同學(xué)一定要把代碼搞到本地跑一遍，這樣才能加深印象。

總結(jié)

以上是生活随笔為你收集整理的防抖 节流_【前端面试】节流与防抖的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。