前端 BUG 錄 - 因 lodashjs debounce 去抖優化形成的 bug

作開發其實仍是要考慮一下邊界問題，由於邊界問題有時候會致使體驗斷崖式的下跌。

正好前段時間遇到了個問題，今天分享一下。以前作了一個 IM 的項目，是會話列表出現的問題：進入頁面時，會加載會話列表，加載數據會形成卡頓。

先說說個人邏輯：

1. 分頁拉取本地歷史數據（已讀消息，userid排序的20我的）
2. 定時拉取遠程數據（未讀消息，最先的20條）
3. 若是有新的消息，那麼會對會話列表排序（Array.prototype.sort）。用 lodash 作了 debounced（防抖動），而且加了 [options.maxWait] ，設置 func 容許被延遲的最大值。

是否是看上數據處理都是一小塊一小塊的，並沒什麼問題？就是這麼巧，由於我代碼沒處理邊界，致使排序的算法的執行時間過長超過100ms（講道理16ms如下才能夠，這裏我換一篇文章說），而後又由於加了 maxWait 致使會同步調用。

https://github.com/lodash/lodash/blob/15e1557b2a97c8bbee22d873832d90ed3ba50ba7/debounce.js

對於咱們普通理解上的去抖其實都是異步操做。

固然最後問題仍是被修復了

1. 修改 sort 算法，改了一下 timsort，而後又改了一下插入排序。下降方法的執行時間，因此不會出現節流失效的問題。
2. 加大 maxWait 防止密集的同步調用。
3. 修改 Array 的長度，禁止無上限的疊加。

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。

參考資料

1. 聊聊lodash的debounce實現