Более простой способ показа отдельных последовательных чисел с JQuery - PullRequest
Новая
       5

Более простой способ показа отдельных последовательных чисел с JQuery

0 голосов
/ 05 ноября 2019

Каждую секунду я хочу показывать число, пока не будет достигнута общая сумма. Вот рабочий код на 10 номеров. Как видите, я набираю каждое число по отдельности от 1 до 10. А что если я захочу сделать это для 5000 номеров? Наверняка должен быть более простой способ поместить список последовательных чисел в переменную «numbers». 

(function() {
  var timesRun = 0;
  var numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    i = 0;

  setInterval(function() {
    timesRun += 1;
    if (timesRun < 10) {
      $('#changing-number').fadeOut(function() {
        $(this).html(numbers[i = (i + 1) % numbers.length]).fadeIn();
      });
    }
  }, 1000);

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="changing-number">0</span> out of 10 have been completed

1 Ответ

0 голосов
/ 05 ноября 2019

Просто покажите timesRun, поскольку это порядковый номер.

Вы также должны очистить интервал, когда достигнете предела.

Вам также следует увеличить счетчик после Вы проверяете его по лимиту, иначе не увидите последнее значение. 

(function() {
  var timesRun = 0;
  var runLimit = 10;
  var interval = setInterval(function() {
    if (timesRun < runLimit) {
      timesRun += 1;
      $('#changing-number').fadeOut(function() {
        $(this).html(timesRun).fadeIn();
      });
    } else {
      clearInterval(interval);
    }
  }, 1000);

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="changing-number">0</span> out of 10 have been completed

Если вы хотите сделать больше чисел, измените runLimit.

...