惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
月光博客
月光博客
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
M
MIT News - Artificial intelligence
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
The Cloudflare Blog
Blog — PlanetScale
Blog — PlanetScale
F
Full Disclosure
G
Google Developers Blog
罗磊的独立博客
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
J
Java Code Geeks
A
About on SuperTechFans
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
GbyAI
GbyAI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
The Register - Security
The Register - Security
U
Unit 42
D
Docker
Martin Fowler
Martin Fowler
L
LINUX DO - 热门话题
NISL@THU
NISL@THU
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
博客园_首页
Google DeepMind News
Google DeepMind News

Fooleap's Blog

渴望理想 | Fooleap's Blog 19 年底一些事 | Fooleap's Blog 藉秋风,跑起来 | Fooleap's Blog 一个人去跑步 | Fooleap's Blog 8 月的跑量仿佛是那暑假的作业 | Fooleap's Blog 三伏天跑步那么难受,为何还要跑? | Fooleap's Blog 解决小程序开发“当前系统代理不是安全代理” | Fooleap's Blog 忘却配速的夏日跑步 | Fooleap's Blog 六月天时“带水”跑步更爽 | Fooleap's Blog 出来混迟早要还的 | Fooleap's Blog 跑步不能当饭吃 | Fooleap's Blog 将京东移动端详情页链接转为 PC 端 | Fooleap's Blog 不是热就是雨 | Fooleap's Blog 这半月,我跑了 11 个 520 | Fooleap's Blog 跑完流汗一时爽,一直流汗一直爽 | Fooleap's Blog 初夏夜跑 | Fooleap's Blog Electron 中打开 QQ 临时会话 | Fooleap's Blog 春节期间的培隆角 | Fooleap's Blog 从春天跑到夏天 | Fooleap's Blog 晨雾中奔跑 | Fooleap's Blog 漫步春雨中 | Fooleap's Blog 跑在木棉花下 | Fooleap's Blog 我在春节依然坚持跑步 | Fooleap's Blog 伴随着日出跑步 | Fooleap's Blog 没有最好,只有更好 | Fooleap's Blog 电子气温计 | Fooleap's Blog 渡亭小学的金凤花 | Fooleap's Blog 随心而跑 | Fooleap's Blog 2018 跑步小结 | Fooleap's Blog 在 gVim 中使用“非等宽字体” | Fooleap's Blog 动车进汕,喜大普奔 | Fooleap's Blog 雨战汕马,漫步鮀城 | Fooleap's Blog 准备出发汕马 | Fooleap's Blog 环苏溪跑个半马 | Fooleap's Blog 不义之财 | Fooleap's Blog 跑去培隆看日落 | Fooleap's Blog 雨后跑土路 | Fooleap's Blog 秋意渐浓 | Fooleap's Blog 在夕阳下奔跑 | Fooleap's Blog 准备参加 2018 汕马 | Fooleap's Blog 不可立见的 spoiler 标签 | Fooleap's Blog TomTom Spark 表带 | Fooleap's Blog Disqus 支持新浪微博图床 | Fooleap's Blog 暂存 Disqus 匿名评论者邮箱地址 | Fooleap's Blog 组一台迷你主机 DeskMini 310 | Fooleap's Blog 我的个人信息卖给了谁? | Fooleap's Blog 我发了违法短信? | Fooleap's Blog 使用 Python 合并地图瓦片 | Fooleap's Blog 使用 Python 合并瓦片图 | Fooleap's Blog 拆电热水壶 | Fooleap's Blog 使用树莓派做监控显示 | Fooleap's Blog 南方的冷 | Fooleap's Blog 蓝牙耳机 Avantree Jogger Plus | Fooleap's Blog 新厝布网 | Fooleap's Blog 报装移动宽带 | Fooleap's Blog 双十一战绩 | Fooleap's Blog 郁闷的心情 | Fooleap's Blog 像 Disqus 一样获取链接颜色 | Fooleap's Blog Disqus 的 URL 编码问题 | Fooleap's Blog 选择框的全选联动 | Fooleap's Blog 弹出层中的视频全屏问题 | Fooleap's Blog 2016 年台风海马 | Fooleap's Blog 纯 CSS 实现导航图标动画 | Fooleap's Blog 湾头晨跑路线推荐:南湾小学跑道 | Fooleap's Blog Jekyll 显示每一年的文章数 | Fooleap's Blog 湾头晨跑路线推荐:南湾堤顶 | Fooleap's Blog Disqus 的 @ 提及功能 | Fooleap's Blog 近日渡亭堤顶的夕阳 | Fooleap's Blog 使用 Disqus API 上传图片 | Fooleap's Blog Disqus API 的权限问题 | Fooleap's Blog 湾头晨跑路线推荐:环三湾 | Fooleap's Blog 如何下载 Apple Emoji 的 PNG 图片 公众号文章二维码 | Fooleap's Blog Disqus 的评论预审核 | Fooleap's Blog 湾头最好的跑道 | Fooleap's Blog 结合七牛和高德地图 API 显示照片位置 | Fooleap's Blog Zip 压缩排除特定目录 | Fooleap's Blog 流水涸摸蚬热 | Fooleap's Blog 2017 跨年跑 | Fooleap's Blog Jekyll 的中文字数统计 | Fooleap's Blog 为 Jekyll 文章页添加相关文章 | Fooleap's Blog 为 Jekyll 添加一个标签页面 | Fooleap's Blog 干了这瓶蛇草水 | Fooleap's Blog 在 macOS 上使用 NTFS 差点丢数据 Disqus Moderator Badge Text 已支持中文 为 Jekyll 添加一个简单的 API | Fooleap's Blog 为 Jekyll 加上简单搜索功能 | Fooleap's Blog 解决 Jemoji 的出错 | Fooleap's Blog 检测网络是否能够访问 Disqus | Fooleap's Blog 解决 This socket is closed 问题 更好的 Markdown 插图方式 | Fooleap's Blog 转换 Nike+ 的坐标数据 | Fooleap's Blog 高德地图 API 显示跑步路线 | Fooleap's Blog 善用 Google 搜索工具 | Fooleap's Blog 利用 Nike+ API 获取跑步路线数据 | Fooleap's Blog 七牛 API 生成页面 URL 二维码 旧年 12 月跑步笔记 | Fooleap's Blog 科学使用 Disqus | Fooleap's Blog 培隆角的日出 | Fooleap's Blog 11 月跑步笔记 | Fooleap's Blog
Disqus API 评论嵌套问题 | Fooleap's Blog
fooleap · 2017-08-06 · via Fooleap's Blog

实现评论嵌套逻辑很简单:若评论列表排序为时间升序,只要评论逐条加载,无父评论就是根评论,有父评论就插到父评论下即可;排序若为时间降序,评论嵌套也不难,只要反序(reverse)之,就跟升序的无区别了。

限制评论获取数量出现的问题

单篇文章的评论数量过多时,一次性全部加载就会比较慢,一次性加载太多内容体验上也不大好,所以得限制一次性加载的评论数量。

当每次加载限制数量时,按时间升序不会出问题,但在时间降序时,问题就来了,下面以一个例子来说下:

thread
│
├─post 7 
│
├─post 4 
│ └─post 5
│    └─post 8
│
├─post 2
│
└─post 1
  ├─post 6
  └─post 3

当每次获取评论的数量限制在 3 时:

  1. 第一次获取的是 6、7、8 楼,其中阿 7 正常加载,而阿 6、阿 8 找不到父评。
  2. 第二次获取的是 3、4、5 楼,其中阿 4、阿 5 正常加载,阿 3 找不到父评。
  3. 第三次获取的是 1、2 楼,都是根评论,正常加载。

以上就只有 1、2、4、5、7 是正常加载的,丢了 3 条。

前端解决

在后端不改的前提下,我选择在前端设置一个未加载的数组变量,当找不到父评时便把评论 push 进去,每次加载评论列表时 concat 它。上面例子使用这个方法解决便如下:

  1. loadlist = [6, 7, 8], unload = [6, 8];
  2. loadlist = [3, 4, 5, 6, 8], unload = [3, 6];
  3. loadlist = [1, 2, 3, 6], unload = [];

注:每次待加载评论数组 loadlist,加载后的未加载数组 unload

这样的话,评论就都能正常加载完成了,但有个问题,初衷限制每次加载评论数量为 3,这个 3 在此并没法体现出来,因为第一次加载显示 1 条,第二次显示 3 条,第三次显示 4 条。原本应该的 332 变成 134 了。

后端解决

在前端不改的前提下,后端最好的解决方法就是每次返回都能正常加载的评论数据,按上面的例子,应该返回的数据是:

  1. 第一次 4、5、7
  2. 第二次 1、2、8
  3. 第三次 3、6

后端要处理的感觉就挺多,可以先获取所有的评论[1],再根据有没父评等,并不简单的排序,还要处理需要传的参数。感觉比较麻烦且不大合理,我就没去折腾。

前端 + 后端解决

另一种妥协的解决方法是结合前后端,后端一次性返回所有评论数据,再由前端去处理每次的显示。前端变成一次获取,多次加载,前端代码会多一些。

综合以上的解决方法,最终选择比较简单的第一种方法解决,虽然例子看起来出入很大,但实际上应用起来。若限制每次加载的评论数为 50,每次加载多几条少几条,在观感上没啥区别。

直至前几天,和 @W_Z_C 讨论这个问题(看不到点此):

之后,我就真去看看,到底 Disqus 原生评论框是怎么解决这个问题的。

原生评论框每次获取的评论数量是正常的,限制多少就是多少。再看请求,发现评论框用的 API 与我自己用的(threads/listPostsposts/list)竟然不一样,它是使用 threads/listPostsThreaded,Disqus API 文档并没有这个接口的有关说明。看情况,使用这个就应该可以很完美地解决上面所遇到的问题。

经测试,threads/listPostsThreaded的权限跟在 API 文档里有的,并无区别。

不过这里有个问题,Disqus 原生评论框,无论如何都是时间降序排序。我想要的是:无父评的按时间倒序,有父评的就是按时间正序,即上面例子中,3 和 6 位置倒过来,比较符合阅读习惯。

参考资料

本文历史

  • 2017 年 08 月 06 日 完成初稿

最近更新

猜你喜欢