关于javascript:前端-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 实现