Вопрос числового формата в непрерывном счетчике - PullRequest
Новая
       12

Вопрос числового формата в непрерывном счетчике

0 голосов
/ 14 апреля 2019

По какой-то причине мой непрерывный счетчик правильно показывает начальное начальное число, '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>

1 Ответ

1 голос
/ 14 апреля 2019

Вы не должны читать текущее значение со страницы обратно в переменную.Вместо этого сохраните значение в памяти (т.е. сохраните состояние ).Ваша текущая проблема заключается в том, что parseInt не будет интерпретировать число так, как вы ожидаете.Но эта проблема становится неактуальной, если вы не зависите от анализа этого числа.Вы создали это сами, так что следите за этим.Также:

  • Вам не нужны оба setInterval и setTimeout
  • Странно, что вы увеличиваете число и по-прежнему проверяете, является ли числоположительно, как если бы это был обратный отсчет.
  • Ваш код увеличивается на 5, а не на 200
  • Комментарии могут быть полезны, но избегайте размещения комментариев, которые вообще не добавляют никакой информации.Например, «// FUNCTION Refresh Timer» действительно ничего полезного не говорит. 

$(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>
...