Что добавить в счётчик js, который не досчитывает до нужного числа?

Question

[boga-net]

Всем привет. Сделал счётчик (не хотел использовать готовый плагин), но появилась проблема. Мои знания в js поверхностны. При переборе элементов методов each, счётчик не добирает 1-2 цифры с инкрементом. Думал, думал и не придумал, что сделать. На первом числе 48, на втором - 399, на третьем - 999

<div class="count-wrapper container">
    <div class="count">
      <span data-num="50">0</span>
    </div>
    <div class="count">
      <span data-num="400">0</span>
    </div>
    <div class="count">
      <span data-num="1000">0</span>
    </div>
  </div>

$(window).on('scroll', function() {
   var scr = $(this).scrollTop(),
   elem = $('.count-wrapper').offset().top;

   if (scr > elem - 400) {
      setInterval(count, 100);
   }
});

var i = 0;
function count() {
  $('.count span').each(function(){
      var num = $(this).data('num');
      if (i < num) {
         $(this).text(i);
	 i++;
      }
  });
}

Answer 1

[0xD34F]

Косяков у вас тут целый ворох:

• Многократные вызовы setInterval - при каждом событии scroll (из-за этого счётчики работают гораздо быстрее, чем запланировано)
  
• Общая для всех счётчиков переменная текущего значения (вследствие чего шаг счётчиков вовсе не единица)
  
• Неверное условие окончания работы счётчика; или неверное место увеличения текущего значения счётчика - после его перезаписи (отсюда несоответствие заданного и реального максимальных значений счётчиков)
  
• После того как все счётчики завершили свою работу вы не прекращаете вызывать count (да, внешне это никак не проявляется, но всё равно - как-то небрежно)
  

Как бы мог выглядеть исправленный вариант вашего кода?

Например, так.

let intervalId = null;

$(window).on('scroll', function() {
  const scr = $(this).scrollTop();
  const elem = $('.count-wrapper').offset().top;

  if (scr > elem - 400 && !intervalId) {
    intervalId = setInterval(count, 10);
  }
}).scroll();

function count() {
  let countEnd = true;

  $('.count span').each(function() {
    const num = $(this).data('num');
    const currNum = $(this).text();

    if (currNum < num) {
      $(this).text(+currNum + 1);
      countEnd = false;
    }
  });

  if (countEnd) {
    clearInterval(intervalId);
  }
}

Comments

[Stalker_RED]

Еще можно вынести поиск dom-элементов за пределы count, запомнить текущие значения в переменную, и оставить в нем только $(this).text(currNum + 1)

[boga-net]

Здравствуйте. Спасибо за ответ и за комментарии - вы правы ) Я только учу js и это всё, до чего я смог самостоятельно додуматься , поэтому эти нюансы для меня ещё не ясны. Первый раз на toster, поэтому только сейчас увидел, что мне ответили.

Попробовал ваш код - отлично, работает, спасибо ) Буду разбирать и брать на заметку

Answer 2

[Basitkhan Mansurov]

Он и считает до 50, 400 и 1000. просто надо учитывать то, что для всех языков программирования 0 тоже число.
попробуй написать if( i<= num)
...
Или просто добавь +1 и всё)

Comments

[boga-net]

if( i<= num) - пробовал - не помогло. Как и +1. В таком случае получается 1001 у третьего числа