快速输入/退格时Jikan API请求重复执行，空输入仍显结果的问题

问题原因 #

1. 快速输入/退格导致结果超20条 #

每一次输入或退格操作都会触发fetch请求，但网络请求是异步的。快速操作时，前一个请求还未完成，新请求就已发起。如果旧请求的响应晚于新请求返回，旧结果会被追加或覆盖到容器中，最终累计超过20条。核心问题是没有做防抖处理，也没有取消未完成的旧请求，导致多轮请求的结果都被渲染。

2. 退格至空字符串仍显示动漫 #

代码未处理搜索关键词为空的场景：要么在输入框为空时仍发起了API请求（Jikan API在空关键词时可能返回热门动漫），要么没有清空之前渲染的结果容器，导致旧内容残留。

修复方案 #

1. 解决重复请求与结果溢出 #

• 添加防抖逻辑：设置300ms左右的延迟，只有用户停止输入超过这个时间才发起请求，避免频繁触发。示例代码：

  let debounceTimer;
  function handleSearch(inputVal) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      inputVal.trim() ? fetchAnime(inputVal) : clearAnimeContainer();
    }, 300);
  }
  

• 用AbortController取消旧请求：发起新请求前，终止上一个未完成的请求，确保只有最新请求的结果被处理。示例代码：

  let abortController;
  async function fetchAnime(query) {
    if (abortController) abortController.abort();
    abortController = new AbortController();
    try {
      const res = await fetch(`https://api.jikan.moe/v4/anime?q=${query}&limit=20`, {
        signal: abortController.signal
      });
      const data = await res.json();
      renderAnimeList(data.data);
    } catch (err) {
      if (err.name !== 'AbortError') console.error('搜索失败:', err);
    }
  }
  

2. 解决空字符串残留结果 #

• 在搜索逻辑中优先判断输入是否为空：如果为空，直接清空容器，不发起API请求。
• 实现清空容器的函数：

  function clearAnimeContainer() {
    document.getElementById('anime-container').innerHTML = '';
  }
  

• 确保在输入框内容变为空时，立即调用clearAnimeContainer，而不是继续执行搜索流程。

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