JavaScript滚动事件监听竞态问题排查与优化咨询

首先得帮你理清楚两个核心问题：为什么单线程的JS还会出现重复触发的问题，以及如何更可靠地解决重复请求的问题。

一、为什么单线程下还会有重复触发？ #

你可能误解了JS单线程的运行逻辑：JS的单线程是指同一时间只能执行一段代码，但事件队列里可以排队多个事件。当用户滚动到阈值时，浏览器会把多个scroll事件加入事件队列。

当第一个scroll事件触发后，你的代码执行到await eventHandler(e)时，会暂停当前函数，把线程交还给事件循环——这时候队列里的其他scroll事件就会被执行。而此时dataShown还没更新，这些后续事件会再次满足“滚动到底部”的判断条件，进而重复执行请求逻辑。

简单说：await会释放线程，让队列里的其他scroll事件提前执行，而此时你的状态变量还没来得及更新。

二、你现有方案的问题 #

你用amountOfWindowScrollEvents的思路是想控制并发，但这个逻辑有明显的竞态风险：

• 第一个scroll事件进来，变量变成1，然后进入await；
• 第二个scroll事件此时也进入代码，变量变成2，判断amountOfWindowScrollEvents == 1不成立，跳过handler；
• 第一个事件执行完，变量减到1，第二个事件继续执行，变量减到0；
• 结果可能是后续的scroll事件没有触发handler，或者逻辑混乱，完全达不到预期效果。

而且你频繁移除/重新绑定scroll事件的操作本身也没必要，反而会带来额外的复杂度。

三、更可靠的解决方案：加载状态锁（最常用） #

最直接且无竞态风险的方式是用一个加载状态标志，在请求数据期间“锁住”逻辑，不让其他scroll事件触发请求。

重构后的代码示例 #

// 核心：加载状态锁，初始为false
let isLoading = false;
let totalData = 20;
let dataShown = 5;
let amountOfDataToGet = 5;

// 初始化滚动监听
function setupInfiniteScroll() {
  $(window).on('scroll', async function() {
    // 先判断两个核心条件：没在加载，且滚动到了底部50px范围内
    if (isLoading) return;
    const isNearBottom = $(window).scrollTop() >= $(document).height() - $(window).height() - 50;
    if (!isNearBottom) return;

    // 上锁，阻止后续scroll事件触发请求
    isLoading = true;
    try {
      await handleWindowScroll();
    } catch (err) {
      console.error('加载数据失败:', err);
      // 可选：这里可以添加错误重试逻辑，比如允许用户再次滚动触发请求
    } finally {
      // 无论请求成功/失败，都解锁
      isLoading = false;
    }
  });
}

async function handleWindowScroll() {
  // 数据加载完，直接移除监听
  if (dataShown >= totalData) {
    $(window).off('scroll');
    return;
  }
  
  const newData = await getData();
  showData(newData);
  dataShown += newData.length;
}

// 调用初始化
setupInfiniteScroll();

方案优势 #

1. 无竞态风险：isLoading是同步变量，单线程下修改是原子操作——只有当isLoading为false时，才会进入请求逻辑，请求过程中所有后续scroll事件都会直接返回。
2. 逻辑清晰：不需要频繁绑定/解绑事件，也不需要维护复杂的事件计数变量。
3. 容错性强：try/catch/finally确保即使请求失败，状态锁也会被释放，不会导致后续无法加载数据。

四、可选优化：结合防抖（Debounce） #

如果想进一步减少scroll事件的触发次数（毕竟scroll是高频事件），可以给scroll事件加个防抖函数，避免不必要的判断：

// 简单的防抖函数实现
function debounce(func, delay = 100) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 修改初始化监听的代码
function setupInfiniteScroll() {
  $(window).on('scroll', debounce(async function() {
    if (isLoading) return;
    const isNearBottom = $(window).scrollTop() >= $(document).height() - $(window).height() - 50;
    if (!isNearBottom) return;

    isLoading = true;
    try {
      await handleWindowScroll();
    } catch (err) {
      console.error('加载数据失败:', err);
    } finally {
      isLoading = false;
    }
  }, 100)); // 100ms的防抖延迟，可根据需求调整
}

防抖的作用是：用户停止滚动100ms后，才执行判断逻辑，避免滚动过程中频繁触发判断。

内容的提问来源于stack exchange，提问作者Gil Keidar