为什么这个 if 语句一直运行？

Why does this if statement keep running?

提问人：cwerrynh 提问时间：8/18/2023 最后编辑：Barmar cwerrynh 更新时间：8/18/2023 访问量：68

问：

对此真的很困惑。控制台日志使它看起来像有自己的想法。刚刚添加了 toFixed 部分，看看它是否会有所帮助，但它没有改变任何东西。

function displayNextReview() {

  let reviewItem = document.getElementById("review-item-" + a);

  if (reviewItem) {
    reviewsList.appendChild(reviewItem);
    if (reviewsList.clientHeight.toFixed() < document.getElementById("container").clientHeight.toFixed()) {
      a++;
      displayNextReview();
      console.log("reviewsList: " + reviewsList.clientHeight + " container: " + document.getElementById("container").clientHeight);
    }
    reviewItem.style.display = 'block';
    $(reviewsList).animate({
      opacity: '1'
    }, 700);
    a++;
    if (a >= merged.length) {
      a = 0;
    }
  }

}

以下是控制台日志：

reviewsList: 0 container: 528
reviewsList: 107 container: 528
reviewsList: 244 container: 528
reviewsList: 349 container: 528
reviewsList: 438 container: 528
reviewsList: 527 container: 528
reviewsList: 632 container: 528
reviewsList: 757 container: 528
reviewsList: 878 container: 528
reviewsList: 999 container: 528
reviewsList: 1136 container: 528
reviewsList: 1273 container: 528
reviewsList: 1378 container: 528
reviewsList: 1611 container: 528
reviewsList: 1748 container: 528
reviewsList: 1853 container: 528
reviewsList: 1974 container: 528
reviewsList: 2175 container: 528
reviewsList: 2280 container: 528
reviewsList: 2385 container: 528
reviewsList: 2634 container: 528
reviewsList: 2787 container: 528
reviewsList: 3020 container: 528
reviewsList: 3205 container: 528
reviewsList: 3342 container: 528
reviewsList: 3463 container: 528
reviewsList: 3568 container: 528
javascript html if 语句

评论

0赞 David 8/18/2023
你能把它更新为一个可运行的最小可重现的例子来证明这个问题吗？
8赞 Barmar 8/18/2023
toFixed()返回一个字符串。不应使用字符串比较来比较数字。
0赞 Peter B 8/18/2023
^-- 同意，因为在比较字符串时，例如“1000”<“15”。
0赞 Barmar 8/18/2023
你要重置到它到达终点时，所以它将继续运行。a0
0赞 cwerrynh 8/18/2023
@Barmar 在我添加 toFixed（） 之前它不起作用

答：

1赞 Chris Barr 8/18/2023 #1

该方法会将数字转换为字符串.toFixed()

var num = 15;
console.log(typeof num, num);

var fixed = num.toFixed();
console.log(typeof fixed, fixed);

这会破坏你的比较逻辑，或者至少不一致！

我建议将这些数字四舍五入为整数。如果您不熟悉，这里有一个快速演示，说明它是如何工作的。Math.floor

var num = 15.9999;

console.log(
  num,
  Math.floor(num)
);

以下是如何使用它

function displayNextReview() {
  let reviewItem = document.getElementById("review-item-" + a);

  if (reviewItem) {
    reviewsList.appendChild(reviewItem);
    
    var reviewListHeight = Math.floor(reviewsList.clientHeight);
    var containerHeight = Math.floor(document.getElementById("container").clientHeight);
    
    if (reviewListHeight < containerHeight) {
      a++;
      displayNextReview();
      console.log("reviewsList: " + reviewListHeight + " container: " + containerHeight);
    }
    
    reviewItem.style.display = 'block';
    
    $(reviewsList).animate({
      opacity: '1'
    }, 700);
    a++;
    
    if (a >= merged.length) {
      a = 0;
    }
  }
}
1赞 cwerrynh 8/18/2023 #2

It ended up being an issue with the reviewslist having a clientHeight of 0 at the point of the if statement. Not sure how it was doing this, but the reviewItems were on display: none which is why they had no height. Just had to rework it to not use display: none.

上一个：在满足条件后如何运行 if 语句？

下一个：如何在 Django 中按字母排序