为何这段if语句持续执行？附代码及控制台日志

你的if语句持续执行，核心有三个关键问题：

1. 递归与日志打印顺序颠倒 #

看代码逻辑：

if (reviewsList.clientHeight.toFixed() < document.getElementById("container").clientHeight.toFixed()) {
  a++;
  displayNextReview(); // 先触发递归
  console.log("reviewsList: " + reviewsList.clientHeight + " container: " + document.getElementById("container").clientHeight); // 递归完成后才打印
}

你看到的控制台日志，不是判断条件时的实时高度，而是所有递归调用执行完毕、栈帧逐层返回时才打印的最终高度。比如第一次判断时reviewsList高度为0，满足条件后触发递归，等所有递归都跑完，才会依次打印每一层的日志，此时高度早已超过容器，造成“条件一直成立”的错觉。

2. DOM高度更新的异步性 #

appendChild(reviewItem)后立刻获取clientHeight，但浏览器的DOM重排（计算元素实际高度）是异步执行的——此时元素还未完成渲染，拿到的是添加前的旧高度。toFixed()只是格式化数值，无法解决高度值本身错误的问题，导致条件判断始终为真，递归停不下来。

3. 变量a被重复递增 #

代码里存在两处a++：

• 递归前的a++
• if块外的a++
  无论if条件是否满足，a都会被递增两次（递归场景下），直接导致a的逻辑混乱，甚至跳过部分reviewItem，同时让递归的终止条件完全失效。

1. 调整日志打印位置：把console.log放在递归前，查看判断条件时的真实高度：

if (reviewsList.clientHeight.toFixed() < document.getElementById("container").clientHeight.toFixed()) {
  console.log("reviewsList: " + reviewsList.clientHeight + " container: " + document.getElementById("container").clientHeight);
  a++;
  displayNextReview();
}

2. 等待DOM重绘完成后判断高度：用requestAnimationFrame等待浏览器完成重排，避免拿到旧高度值：

function displayNextReview() {
  let reviewItem = document.getElementById("review-item-" + a);
  if (reviewItem) {
    reviewsList.appendChild(reviewItem);
    reviewItem.style.display = 'block';
    // 等待DOM重绘完成后再计算高度
    requestAnimationFrame(() => {
      if (reviewsList.clientHeight < document.getElementById("container").clientHeight) {
        console.log("reviewsList: " + reviewsList.clientHeight + " container: " + document.getElementById("container").clientHeight);
        a++;
        displayNextReview();
      }
    });
    $(reviewsList).animate({ opacity: '1' }, 700);
    // 移除重复的a++，仅在递归时递增
    if (a >= merged.length) {
      a = 0;
    }
  }
}

3. 清理重复的a++：只在需要递归时递增a，避免逻辑混乱。

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