解决API调用重复返回相同数据问题：setInterval使用误区排查

你的代码存在两个核心问题：

• slip_id仅在页面加载时生成一次，首次请求用了这个固定ID，后续没有重新生成新ID发起新请求
• setInterval内部只是重复渲染第一次请求返回的旧数据，完全没有再次调用API获取新内容

修正方案 #

把API请求+渲染的逻辑封装成独立函数，每次调用时都生成新的随机ID并发起请求，这样不管是首次加载还是定时刷新，都能获取新数据：

const advice = document.getElementById("advice");
const adviceNum = document.getElementById("adviceNum");

// 封装请求+渲染的逻辑为函数
function fetchNewAdvice() {
  // 每次调用都生成新的整数随机ID
  const slip_id = Math.floor(Math.random() * 100);
  console.log(slip_id);

  fetch(`https://api.adviceslip.com/advice/${slip_id}`)
    .then(response => response.json())
    .then(data => {
      const returnedAdvice = data.slip.advice;
      const idAdvice = data.slip.id;

      adviceNum.innerText = `ADVICE #${idAdvice}`;
      advice.innerText = `"${returnedAdvice}"`;
    })
    .catch(error => {
      console.error("请求失败:", error);
      advice.innerText = "获取建议失败，请稍后重试";
    });
}

// 页面加载时首次调用
fetchNewAdvice();
// 每隔8秒调用一次，获取新数据
setInterval(fetchNewAdvice, 8000);

额外优化说明 #

• 用Math.floor()把随机数转为整数，避免生成带小数的ID（API仅接受整数ID）
• 补充错误处理逻辑，请求失败时给用户明确提示
• 统一复用请求与渲染逻辑，避免代码冗余

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