点击“加载更多”需监听事件、防重复请求、异步获取分页数据、安全追加DOM、动态更新按钮状态（加载中/无更多/错误提示）并处理边界情况。
点击“加载更多”按钮时，通常需要向服务器请求新数据、追加到页面现有内容末尾，并更新按钮状态（比如禁用、显示加载中、或替换为“没有更多了”）。核心在于事件监听、异步请求、DOM 更新和状态管理。
绑定点击事件并防止重复触发
给按钮添加 click 事件监听器，同时用一个标志位（如 isLoading）避免用户快速连点导致多次并发请求：
- 初始设
let isLoading = false - 点击时先判断
if (isLoading) return - 立即设
isLoading = true，并可同步更新按钮文字为“加载中…” - 请求完成（无论成功失败）后重置
isLoading = false
发起请求并处理分页数据
使用 fetch 或 axios 获取下一页数据。常见做法是维护一个页码变量（page = 1），每次点击后递增：
- URL 示例：
fetch(`/api/items?page=${page}`) - 响应应包含数据数组（如
data.items）和是否还有下一页的标识（如data.hasMore或data.total > page * pageSize） - 若返回空数组或
hasMore === false，后续点击应直接提示“没有更多了”并禁用按钮
安全地追加内容到页面
拿到新数据后，不要用 innerHTML += ...（会重绘整个容器，丢失已有事件绑定和输入状态），推荐：
立即学习“Java免费学习笔记（深入）”；
- 用
document.createElement和element.appendChild逐个插入，或 - 用
insertAdjacentHTML('beforeend', htmlString)批量插入（更简洁，但需确保 HTML 字符已转义） - 插入后可调用
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })滚动到底部（按需）
更新按钮状态与用户体验细节
按钮不只是“能点/不能点”，还应反馈当前状态：
- 加载中：设置
button.disabled = true，文字改为“加载中…” - 无更多：设
button.disabled = true，文字改为“没有更多了”，也可加opacity: 0.6视觉弱化 - 出错时：恢复按钮可用，文字改回“加载更多”，并在控制台或 toast 提示错误（如网络失败）
- 可选：在按钮上方或下方加一个小型加载动画（如
<span class="spinner"></span>配合 CSS 动画）
不复杂但容易忽略的是边界处理——比如最后一页返回空数据、接口报 404、用户离线时点击等。加上简单的错误捕获和降级提示，交互就更健壮了。
