连续计数器中的数字格式问题

Question

由于某种原因，我的连续计数器正确显示了带有千位分隔符的初始起始数字'65,000'，但之后它无法在每个计数上将 200 增量添加到起始数字中。 我想看到的是

65,000, 65,200, 65,400, etc

我

怀疑我仍然错误地使用我的千位分隔符格式函数"带逗号的数字"。 我尝试从代码中的许多其他位置调用它，但没有任何效果。 我也对如何将以前的帖子改编成此代码感到困惑。有点超出我的深度。 谁能帮忙？ https://jsfiddle.net/cs6hL4jy/

$(document).ready(function() {
  var StartNowTonnes = 6500000
  var timeVal = StartNowTonnes;
  $('.timer').html(timeVal);
  refreshTimer(); // Load timer function
  var timerInterval = 1000;
  var loadTimer = setInterval(refreshTimer, timerInterval);
});
//----------------------------
// FUNCTION Refresh Timer
function refreshTimer() {
  // Set counter
  setTimeout(function() {
    // Get timer value
    var myTime = parseInt($('.timer').html()) + 5;
    // If timer has not reached 0
    if (myTime > 0) {
      //$('.timer').html(myTime);
      var myTimeWithComma = numberWithCommas(myTime);
      $('.timer').html(myTimeWithComma);
    } else {
      $('.timer').html('Time up!');
    }
  }, 1);
}
//--------
function numberWithCommas(number) {
  var parts = number.toString().split(".");
  parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");
  return parts.join(".");
}

.timer {
  background: #d2d8e8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer"></div>

Answer 1

您不应将页面中的当前值读回变量。而是将值保留在内存中(即维护状态(。您当前的问题是parseInt不会像您期望的那样解释该数字。但是，如果您不依赖于解析该数字，则该问题将变得无关紧要。您自己生成了它，因此请跟踪它。也：

• 您不需要setInterval和setTimeout
• 奇怪的是，您增加了数字，仍然检查该数字是否为正数，就好像它是倒计时一样。
• 您的代码以 5 递增，而不是以 200 递增
注释
• 可能会有所帮助，但请避免放置根本不添加任何信息的注释。就像"//FUNCTION刷新计时器"真的没有告诉任何有用的东西。

$(document).ready(function() {
  var state = {
      timerInterval: 1000,
      myTime: 6500000,
      increment: 200
  };
  refreshTimer(state);
});
function refreshTimer(state) {
    var myTimeWithComma = numberWithCommas(state.myTime);
    $('.timer').html(myTimeWithComma);
    
    // If timer has not reached 0
    if (state.myTime > 0) {
        state.myTime += state.increment;
        setTimeout(() => refreshTimer(state), state.timerInterval);
    } else {
        $('.timer').html('Time up!');
    }
}
//--------
function numberWithCommas(number) {
  var parts = number.toString().split(".");
  parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");
  return parts.join(".");
}

.timer {
  background: #d2d8e8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer"></div>