本文介绍通过添加加载锁机制（loading 标志位）来避免 $(window).scroll() 中频繁、重复发起 AJAX 请求的问题，确保每次滚动加载只执行一次，待上一次请求完成后再响应下一次触发。
本文介绍通过添加加载锁机制（loading 标志位）来避免 `$(window).scroll()` 中频繁、重复发起 ajax 请求的问题，确保每次滚动加载只执行一次，待上一次请求完成后再响应下一次触发。
在实现“滚动到底部自动加载更多内容”的功能时，一个常见陷阱是：scroll 事件极其高频触发（尤其在快速滚动或移动端），导致 $.ajax() 被连续调用多次，不仅浪费服务器资源，还可能因请求竞态造成 DOM 渲染错乱、数据重复或丢失。
核心解决方案是引入请求节流控制（Loading Lock）：使用一个布尔变量 loading 作为状态锁，在 AJAX 请求发起前置为 true，并在请求结束（无论成功或失败）后重置为 false。这样可确保同一时刻最多只有一个加载请求处于进行中。
以下是优化后的完整代码示例：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
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() <= $(window).scrollTop() + $(window).height();
if (scrollThreshold && lastID && parseInt(lastID) !== 0) {
loading = true; // 锁定状态
$.ajax({
type: 'POST',
url: 'getData.php',
data: { id: lastID }, // 推荐使用对象格式传递参数，更安全可靠
beforeSend: function() {
$loadMore.show();
},
success: function(html) {
$loadMore.remove();
$('#postList').append(html);
},
always: function() {
loading = false; // 关键：务必在 always 中重置，确保异常时也能解锁
}
});
}
});
});✅ 关键改进点说明：
- 使用
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），推荐新项目优先采用。
⚠️ 注意事项：
综上，一个轻量、健壮、可维护的滚动加载实现，离不开状态管理与生命周期意识——锁住请求，才能稳住体验。
