轮播滑块中处理多API调用以避免数据闪烁问题

你遇到的是典型的API请求竞态问题：旧请求的响应晚于新请求返回，导致UI被旧数据短暂覆盖后才更新为正确数据。防抖只能减少请求触发频率，但无法处理已发出的请求的响应顺序问题。以下是几种直接有效的解决方案：

方案1：使用AbortController取消未完成的请求 #

现代浏览器原生支持AbortController，可以直接终止正在进行的请求，从根源上避免旧响应干扰UI。

// 保存当前请求的控制器实例
let currentAbortController = null;

function fetchItemData(itemId) {
  // 取消之前未完成的请求
  if (currentAbortController) {
    currentAbortController.abort();
  }
  
  // 创建新的控制器
  currentAbortController = new AbortController();
  const signal = currentAbortController.signal;

  fetch(`/api/items/${itemId}`, { signal })
    .then(response => response.json())
    .then(data => {
      // 仅当当前请求未被取消时更新UI
      if (!signal.aborted) {
        updateUI(data); // 替换成你的UI更新逻辑
      }
    })
    .catch(error => {
      // 忽略请求取消导致的错误
      if (error.name !== 'AbortError') {
        console.error('数据请求失败:', error);
      }
    });
}

原理：每次切换轮播项触发新请求时，先终止之前还在pending的请求，旧请求会直接进入catch分支且被过滤，不会走到UI更新步骤。

方案2：标记并忽略旧请求的响应 #

如果需要兼容不支持AbortController的旧环境（如IE），可以给每个请求添加唯一标识，仅处理最新标识的响应。

// 保存当前请求的唯一ID
let currentRequestId = 0;

function fetchItemData(itemId) {
  const requestId = ++currentRequestId;

  fetch(`/api/items/${itemId}`)
    .then(response => response.json())
    .then(data => {
      // 仅当当前请求是最新的才更新UI
      if (requestId === currentRequestId) {
        updateUI(data); // 替换成你的UI更新逻辑
      }
    })
    .catch(error => {
      console.error('数据请求失败:', error);
    });
}

原理：每次触发请求时生成递增的ID，响应返回时对比当前的currentRequestId，只有匹配才更新UI，旧请求的响应直接被丢弃。

方案3：防抖+请求追踪结合使用 #

你已经在用防抖优化快速滑动的场景，可以将防抖和上述方案结合，进一步减少无效请求并解决竞态问题：

let currentAbortController = null;

// 防抖后的请求函数（延迟时间根据你的需求调整）
const debouncedFetch = debounce((itemId) => {
  if (currentAbortController) {
    currentAbortController.abort();
  }
  currentAbortController = new AbortController();
  const signal = currentAbortController.signal;

  fetch(`/api/items/${itemId}`, { signal })
    .then(res => res.json())
    .then(data => {
      if (!signal.aborted) updateUI(data);
    })
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });
}, 300);

// 轮播项停留时触发的逻辑
function onItemStay(itemId) {
  debouncedFetch(itemId);
}

说明：防抖避免用户快速滑动时频繁触发请求，同时每次触发新请求时终止旧请求，双重保障UI只显示最新数据。

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