用户滚动div时停止定时器：禁用setInterval触发的Ajax请求

这个需求太贴合实际场景了——用户正在浏览滚动内容的时候，自动刷新反而会打断体验，咱们可以通过监听滚动事件动态控制请求的触发，给你两个实用的实现方式：

方案一：滚动时停止定时器，停止滚动后恢复 #

这个思路最直接：用户开始滚动时立刻停掉自动请求的定时器，等用户停止滚动一段时间后，再重新启动定时器。

// 保存定时器和滚动超时的ID
let ajaxTimer;
let scrollTimeout;

// 封装启动定时器的函数
function startAutoRefresh() {
  ajaxTimer = setInterval(() => {
    // 这里替换成你的实际Ajax请求逻辑
    loadDivData();
  }, 10000); // 10秒间隔
}

// 封装停止定时器的函数
function stopAutoRefresh() {
  clearInterval(ajaxTimer);
}

// 模拟Ajax请求（替换成你的真实请求）
function loadDivData() {
  console.log('发起Ajax请求，填充div数据');
  // 示例：用fetch请求数据并更新div
  // fetch('/your-api-endpoint')
  //   .then(res => res.text())
  //   .then(html => document.getElementById('target-div').innerHTML = html);
}

// 获取目标div元素
const targetDiv = document.getElementById('target-div');

// 监听div的滚动事件
targetDiv.addEventListener('scroll', () => {
  // 滚动开始时，先停止自动刷新
  stopAutoRefresh();
  
  // 清除之前的滚动超时，避免重复触发恢复逻辑
  if (scrollTimeout) clearTimeout(scrollTimeout);
  
  // 用户停止滚动1秒后，重新启动自动刷新（时间可按需调整）
  scrollTimeout = setTimeout(() => {
    startAutoRefresh();
  }, 1000);
});

// 页面加载完成后，启动初始的自动刷新
document.addEventListener('DOMContentLoaded', startAutoRefresh);

为什么这么做？ 既避免了用户滚动时被突然刷新的内容打断，又能在用户停止浏览后恢复自动更新，平衡了实时性和用户体验。

方案二：用标志位控制请求触发（不频繁启停定时器） #

如果不想反复启停定时器（比如担心定时器的性能问题），可以用一个标志位来判断当前是否允许发起请求：

let isScrolling = false;
let scrollTimeout;
let ajaxTimer;

// 带标志位检查的请求函数
function loadDivData() {
  // 如果用户正在滚动，直接跳过这次请求
  if (isScrolling) return;
  
  console.log('发起Ajax请求，填充div数据');
  // 你的真实Ajax逻辑
}

// 启动定时器
function startAutoRefresh() {
  ajaxTimer = setInterval(loadDivData, 10000);
}

const targetDiv = document.getElementById('target-div');

// 监听滚动事件，更新标志位
targetDiv.addEventListener('scroll', () => {
  isScrolling = true;
  
  if (scrollTimeout) clearTimeout(scrollTimeout);
  
  // 用户停止滚动1秒后，允许再次发起请求
  scrollTimeout = setTimeout(() => {
    isScrolling = false;
  }, 1000);
});

document.addEventListener('DOMContentLoaded', startAutoRefresh);

这个方案的优势：定时器始终在后台运行，只是根据滚动状态决定是否执行请求逻辑，适合对定时器启停有顾虑的场景。

额外注意事项 #

• 确保你的div设置了明确的高度和overflow: auto（或overflow: scroll），否则滚动事件不会被触发；
• 滚动超时的时间（示例中的1秒）可以根据需求调整：太短可能会在用户滚动过程中误恢复请求，太长则会延迟自动刷新的恢复；
• 如果你的Ajax请求耗时较长，建议再加一个isRequesting标志位，避免同一时间多个请求并发：

  let isRequesting = false;
  function loadDivData() {
    if (isScrolling || isRequesting) return;
    isRequesting = true;
    
    fetch('/your-api-endpoint')
      .then(res => res.text())
      .then(html => {
        document.getElementById('target-div').innerHTML = html;
      })
      .finally(() => {
        isRequesting = false;
      });
  }
  

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