JavaScript如何实现每隔指定秒数更新替换展示的随机用户列表

问题根源 #

• 你目前使用的document.write API在页面初始加载完成后调用，只会向DOM末尾追加内容，不会覆盖已有内容，所以会出现每次新增8条用户而不是替换的问题
• 你定义的myTimer函数无法访问fetch回调内的局部变量users，实际运行会抛出变量未定义的报错

解决方案 #

首先在你的HTML代码中新增一个专门用来展示用户列表的容器：

<div id="user-list"></div>

替换原有JS代码为如下内容：

// 存储请求返回的全量用户数据，供后续渲染复用
let githubUsers = [];
// 绑定列表容器DOM节点
const userListEl = document.getElementById('user-list');

// 封装独立的用户列表渲染函数
function renderRandomUsers() {
  // 先清空容器原有内容，实现替换效果
  userListEl.innerHTML = '<h3>Highlighred Github users</h3>';
  // 生成8个随机用户并插入容器
  for (let i = 0; i < 8; i++) {
    const randomIndex = Math.floor(Math.random() * githubUsers.length);
    const userItem = document.createElement('p');
    userItem.textContent = githubUsers[randomIndex].login;
    userListEl.appendChild(userItem);
  }
}

// 请求用户数据
fetch('https://api.github.com/users')
  .then(res => res.json())
  .then(users => {
    githubUsers = users;
    // 首次加载立即渲染
    renderRandomUsers();
    // 每隔30秒重新渲染一次
    setInterval(renderRandomUsers, 30000);
  })
  .catch(err => console.error(err));

优化说明 #

• 统一使用标准DOM API操作内容，规避document.write的不可预期行为
• 用户数据只请求一次存在全局变量中，不需要重复调用接口，节省请求资源
• 每次渲染前先清空容器内容，自然实现旧列表替换效果
• 如果你需要每次定时刷新都拉取最新的接口用户数据，把fetch的逻辑放到renderRandomUsers函数内执行即可，不需要预先存储全局用户数据

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