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

Question

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

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

我怀疑我还在错误地使用我的千位分隔符格式化函数'numberWithCommas'。我试图从代码中的许多其他地方调用它，但没有任何作用。我也很困惑如何调整以前的帖子到这段代码。在这里我的深度。有人可以帮忙吗？ 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>