面試題裡經常見到這兩個詞語：防抖和節流，主要是和效能優化有關係，今天終於用了一次例項：
應用情景：要做乙個美顏的功能，當滑動滾動條的時候，可以直接請求介面，實現效果
但是滑動條每次滑動都會觸發出很多值變化，可以理解為每次滑動他都請求了好多次介面，這樣就會影響效能。除此之外，還有scroll、mousemove等，也是會頻繁觸發，和這種情況類似。
稍微複雜一點的情況如搜尋框input事件，支援實時搜尋功能可使用節流方案，每隔一段時間就查詢一下搜尋內容；頁面需要適配用到resize，可使用防抖方案。
解決方法就很簡單了，用到了我們說的防抖和節流，目的就是在於讓他別觸發的這麼頻繁。
首先介紹一下防抖（debounce）：指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。上**：
<
template
>
="beauty-skin-slider"
>
"beauty"
:min=
"0":max=
"9":step=
"1">
<
/el-slider>
<
/div>
<
/template
>
data ();
},watch:
this
.timer1 =
settimeout((
)=>
,1000);
},methods:
}<
/script>這個方法就是通過監聽beauty的值，判斷計時器存不存在，存在的話就清除，重新在設一秒的計時器，等這個計時器執行完了才調介面。
let flag =
;function()
flag =
false
;settimeout((
)=>
,1000);
}節流的實現方式有兩種可以選擇：時間戳版和定時器版，區別就是，時間戳版的函式觸發是在時間段內開始的時候，而定時器版的函式觸發是在時間段內結束的時候。
最後看到別的大神一句精闢的總結借鑑一下「防抖是控制次數，節流是控制頻率」
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
防抖和節流
在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...