JS函式節流 函式防抖

函式節流（throttle）

//函式節流

加入函式節流函式
使用方法
this.$refs.throttle.addeventlistener('scroll',

throttle(that.console, 300)
)
函式防抖（debounce）

很明顯，這樣的做法不好的是當使用者輸入第乙個字元的時候，就開始請求判斷了，不僅對伺服器的壓力增大了，對使用者體驗也未必比原來的好。而理想的做法應該是這樣的，當使用者輸入第乙個字元後的一段時間內如果還有字元輸入的話，那就暫時不去請求判斷使用者名稱是否被占用。在這裡引入函式防抖就能很好地解決這個問題

其實函式防抖的原理也非常地簡單，通過閉包儲存乙個標記來儲存 settimeout 返回的值，每當使用者輸入的時候把前乙個 settimeout clear 掉，然後又建立乙個新的 settimeout，這樣就能保證輸入字元後的 interval 間隔內如果還有字元輸入的話，就不會執行 fn 函式了。

utils.js

//函式防抖
加入防抖函式.gif
使用方法
原生的js:
$('input.user-name').on('input', debounce( () => , 800）
在vue中的使用:

methods:)

}
總結

參考作者內容:函式節流與函式防抖
 
函式防抖 函式節流
函式節流 乙個函式執行一次後，只有大於設定的執行週期後才會執行第二次。有個需要頻繁觸發的函式，出於優化效能的角度，在規定時間內，只讓函式觸發的第一次生效，後面不生效。節流函式 function throttle fn,delay 200 函式防抖 乙個需要頻繁觸發的函式，在規定時間內，只讓最後一次生...
函式防抖，函式節流
防抖原理 在事件被觸發規定的時間後才執行一次，如果在規定的時間內又一次觸發了事件則重新計時。應用場景 1.scroll事件滾動觸發 2.搜尋框輸入查詢 3.瀏覽器視窗縮放，resize事件 防抖實現 function debounce func,wait,bool wait 立即執行,如果calln...
函式防抖，函式節流
我又雙叒叕來撿起一切的老知識了 今天主要回顧的是 作為為數不多的面試中高頻問題且實際工作經常用到的 函式防抖，節流 首先科普一下函式防抖，節流的概念 函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。函式節流 限制乙個函式在一定時間內只能...