如何在遍历完JSON数组后正确触发JavaScript页面刷新？

我帮你排查了代码里的几个关键问题，正是这些问题导致你的遍历完成后的刷新逻辑没有执行，下面是修复后的完整代码和详细解释：

核心问题梳理 #

1. 逻辑分支不可达：你把刷新页面的判断代码放在了return语句之后，这部分代码永远不会被执行；
2. 数据赋值错误：你将d赋值为data[0]，如果data是你的新闻数组，这会让d变成单个新闻对象而非数组，后续的d[i]和d.length判断都会失效；
3. 条件判断逻辑错误：用!d[i]来判断是否遍历完数组不准确，应该直接通过索引i和数组长度d.length对比；
4. HTML转义字符问题：代码里的&&、>是HTML转义后的字符，在JavaScript中需要改为&&、>才能正常运行。

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='news'>
  <ul></ul>
</div>

<script>
var i = 0, d = null, x = null, interval = 3000;
console.log('welcome');

$(document).ready(function(){
  fetch();
  console.log('fetching');
});

function fetch(){
  // 随机参数避免缓存，获取完整的新闻数组
  $.getJSON('info.json?ver=' + Math.floor(Math.random() * 100), function(data){
    // 这里改为赋值整个数组，而非单个元素
    d = data;
    console.log('results');
    console.log(data);
    // 清除之前的定时器（如果存在），避免重复触发
    if(x) clearInterval(x);
    // 立即执行一次update，然后启动定时器
    update();
    x = setInterval(update, interval);
  });
}

function update(){
  console.log('update starting');
  // 判断是否遍历完整个数组
  if (d && i >= d.length) {
    console.log('遍历完成，开始刷新页面');
    clearInterval(x);
    window.location.reload();
    return;
  }
  
  // 移除之前的新闻项，添加当前新闻
  $('ul').empty();
  $('ul').append('<li>' + d[i]['news'] + '</li>');
  
  // 索引自增，准备下一次遍历
  i++;
}
</script>

关键修改说明 #

• 修正数据赋值：把d = data[0]改为d = data，确保d是完整的新闻数组；
• 调整判断逻辑：直接用i >= d.length判断是否遍历完成，逻辑更清晰准确；
• 修复分支可达性：把刷新逻辑放在正确的分支里，确保遍历完成后能执行；
• 优化定时器处理：在重新获取数据时先清除之前的定时器，避免出现多个定时器同时运行的问题；
• 修正转义字符：把所有HTML转义后的符号改为JavaScript原生符号，保证代码正常解析。

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