点一下加载更多,网络慢的时候又点了一下,列表里同一批十条文章整段出现两次,滚动高度一下多出一屏,刷新后才恢复。乍看像缓存或者权限的锅,追下去往往不是。

if (loading) return;
loading = true;
btn.disabled = true;
// 请求结束后再放开按钮

追下去是这么回事:按钮在请求返回前没有置为禁用,两次点击带的还是同一个游标,服务端返回同一批数据,前端直接往数组后面追加。请求层也没有按 ID 去重,重复条目就落进了 DOM。

「加载更多重复」这类改动最怕改一半,回滚脚本先准备好,再动生产。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

具体做法是,请求发出时立刻把按钮 disabled,回来再放开,重复点击就拦在入口;追加前按文章 ID 过滤一遍,已存在的跳过,不要整段 concat;游标改成严格大于上一批最后一条的时间戳,边界那条不会被重复取到。

验收就看一点,弱网下连点三次,列表条数只增加一页的量,没有重复标题,按钮在请求期间是灰的。

作者 9823189