本文介绍通过添加加载锁机制（loading 标志位）来避免 $(window).scroll() 中频繁、重复发起 AJAX 请求的问题，确保每次滚动加载只执行一次，待上一次请求完成后再响应下一次触发。
本文介绍通过添加加载锁机制（loading 标志位）来避免 `$(window).scroll()` 中频繁、重复发起 ajax 请求的问题，确保每次滚动加载只执行一次，待上一次请求完成后再响应下一次触发。
在实现“滚动到底部自动加载更多内容”的功能时，一个常见陷阱是：scroll 事件极其高频触发（尤其在快速滚动或移动端），导致 $.ajax() 被连续调用多次，不仅浪费服务器资源，还可能因请求竞态造成 DOM 渲染错乱、数据重复或丢失。
核心解决方案是引入请求节流控制（Loading Lock）：使用一个布尔变量 loading 作为状态锁，在 AJAX 请求发起前置为 true，并在请求结束（无论成功或失败）后重置为 false。这样可确保同一时刻最多只有一个加载请求处于进行中。
以下是优化后的完整代码示例：
var loading = false;
$(document).ready(function() {
$(window).scroll(function() {
// 若当前有请求正在进行，则直接退出，避免重复触发
if (loading) return;
const $loadMore = $('.load-more');
const lastID = $loadMore.data('last-id') || $loadMore.attr('lastID'); // 推荐使用 data-* 属性存储 ID
// 判断是否滚动到底部：容器高度 ≤ 视口顶部偏移 + 视口高度，且还有更多数据
const scrollThreshold = $('#postList').height() <p>✅ <strong>关键改进点说明：</strong> </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img
src="https://img.php.cn/upload/manual/001/431/639/6a21619eac924328.png" alt="jQuery 1.12.4" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="overflowclass">jQuery 1.12.4</a>
<p class="overflowclass">jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 使用
loading变量实现请求互斥，从根本上阻止并发请求； -
always回调替代complete（已弃用），确保无论 success/fail 都能释放锁； - 推荐将
lastID存储于data-last-id属性（如<div class="load-more" data-last-id="123">），并通过 <code>.data('last-id')读取，语义更清晰且支持自动类型转换； -
data参数改用对象写法，避免手动拼接字符串带来的 XSS 风险与编码问题； - 不要仅依赖
success回调重置loading，网络超时或服务端错误会导致锁永久挂起； - 滚动判断逻辑建议增加防抖（debounce）或节流（throttle）进一步优化性能（尤其在高频率滚动场景）；
- 更现代的替代方案是使用 Intersection Observer API，它原生支持元素可见性监听，性能更高、兼容性良好（现代浏览器及 iOS Safari ≥ 12.2），推荐新项目优先采用。
⚠️ 注意事项：
综上，一个轻量、健壮、可维护的滚动加载实现，离不开状态管理与生命周期意识——锁住请求，才能稳住体验。
