節流和防抖函式應用場景及最佳化方法

一、防抖函式

應用場景

輸入框中頻繁的輸入內容，搜尋或者提交資訊；

頻繁的點選按鈕，觸發某個事件；

監聽瀏覽器滾動事件，完成某些特定操作；

search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。

window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

**原理：**在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時。

**大白話版原理：**小明答應在三天之後還錢給小紅，但是小紅在三天內如果再催小明還錢的話，則會重新開始計算這三天時間，只有三天內小紅不催小明換錢，三天後小明才會還小紅的錢

1。基礎版防抖函式

簡單的實現了防抖函式的功能

<！DOCTYPE html>

點選

2。最佳化this的指向

在基礎版防抖函式中，在我們所寫的防抖函式中this指向為我們所點選的標籤，而在我們呼叫的時候this指向為window，有時候我們需要對原來的標籤進行操作的話，此時我們需要改變this的指向來拿到原來的標籤

<！DOCTYPE html>

點選

3。最佳化立即執行效果（第一次立即執行）

<！DOCTYPE html>

點選

二、節流函式

節流的應用場景：

監聽頁面的滾動事件；

滑鼠移動事件；

使用者頻繁點選按鈕操作；

滑鼠不斷點選觸發，mousedown（單位時間內只觸發一次）

監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷

**原理：**規定在一個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效。

**大白話版原理：**小明答應在三天之後還錢給小紅，在這三天內小明無論催小明多少次還錢或者是不催，小明都會在三天後還錢給小紅

1。基礎版防抖函式

<！DOCTYPE html>

點選