前端 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实现