点击“查看更多”无反应，需检查是否漏写event.preventDefault()；数据为空时按钮仍显示，应优先依据后端has_more等分页字段而非仅判断data.length。
点击“查看更多”后页面没反应？先检查事件绑定是否漏了 preventDefault
很多同学写完 addEventListener 绑定点击，但点下去没加载、甚至整个页面跳转或刷新——大概率是没阻止默认行为。尤其当按钮是 <a href="#"> 或表单内 <button> 时，浏览器会按原语义执行跳转或提交。
- 用
<a href="javascript:void(0)">避免跳转，但不够语义化；更推荐用<button type="button"> - 如果用了
<a href="#">，回调里必须写event.preventDefault() - React/Vue 等框架中，
onClick通常自动处理，但原生 JS 不会
数据接口返回空数组，但“查看更多”按钮还在显示？别只看 data.length
后端分页常返回 { data: [], has_more: false } 或 { list: [], next_cursor: null }。只靠前端判断 response.data.length === 0 来隐藏按钮，容易误判：比如第一页有数据，第二页接口出错返回空数组，此时应保留按钮并提示错误，而不是直接禁用。
- 优先信任后端返回的分页标识字段，如
has_more、next_page、cursor - 若后端没提供，至少加一层状态标记：
isLastPage = response.data.length - 网络失败时，别自动隐藏按钮，应保持可点击，并在控制台或 toast 提示错误
滚动到底部自动加载 vs 点击按钮加载？选哪个取决于用户场景和性能敏感度
自动加载（infinite scroll）体验顺滑，但对 SEO 不友好，且容易在弱网下触发多次重复请求；按钮加载（load more）可控性强，适合内容重要性高、需用户主动确认的场景（比如评论、日志）。
- 列表项高度差异大、或含图片未懒加载时，滚动监听易误触发，建议改用 Intersection Observer +
threshold: 0.1 - 按钮加载更易做防抖：
isLoading状态为 true 时直接 return，避免连点发送多请求 - 移动端小屏上，“查看更多”按钮比滚动监听更可靠——手指滑动可能不精准，导致加载延迟或遗漏
fetch 加载更多时，怎么避免新旧请求乱序覆盖渲染？
用户快速点击两次“查看更多”，后发的请求先返回，把先发的数据覆盖掉，结果列表顺序错乱或重复。这不是 UI 问题，是请求生命周期没管理好。
立即学习“前端免费学习笔记（深入）”；
- 每次发起新请求前，调用上一个
AbortController.abort()（需在 fetch 里传signal） - 给每次请求打唯一标记（如
requestId = Date.now()），成功回调里先比对if (requestId !== latestRequestId) return - 更稳妥的做法：禁用按钮直到当前请求完成，配合 loading 状态和
disabled属性
真正难的不是写加载逻辑，而是让“加载中”“加载失败”“已到底”这三种状态，在各种网络波动、后端异常、用户乱点的情况下，始终准确反映真实数据边界。
