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

防抖

節(jié)流

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

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

請先利用下面的命令安裝 jquery，在項目根目錄下執(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);})

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

本著這個思路，我們有：

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();})

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

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

二、節(jié)流

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

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

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

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é)流的原理比防抖更簡單，當函數(shù)被成功的執(zhí)行過一次，本次成功執(zhí)行的時間會被記錄下來，那么當用戶頻繁點擊按鈕的時候，這些次記錄的時間距離上次成功執(zhí)行的時間太短，小于閾值，因此不被執(zhí)行。

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

總結(jié)

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

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