Анимация счётчика

Question

Если блок

<div id="count"></div>

Нужно сделать, чтобы сразу, при загрузке страницы в этом блоке начинался быстрый счёт начиная со 100.000 увеличиваясь на +3 каждую итерацию. Время итерации: 10 миллисекунд.

Спустя примерно 5 секунд у меня ajax получает данные с файла result.php:

$(document).ready(function() {
    $.ajax({
        url: "result.php",
        method: "GET",
        success: function(data) {
                       $('#count').text(data); // Добавляем значение в поле с id = count
        }
    });
});

Когда ajax получает данные - нужно остановить счётчик, который запустился сразу после загрузки и вместо цифр, которые там отобразились, вывести данные, полученные через ajax.

Answer 1

Ну я бы попробовал так, если я правильно понял твою "задачку".

Используя setInterval() при загрузке страницы включай счетчик, а в блок success своего ajax делай clearInterval(). И у тебя при получении данных перестанет счетчик "считать".

https://learn.javascript.ru/settimeout-setinterval

Answer 2

В общем и целом с таймером работать надо вот таким образом. Я не очень понял тз, то есть в какой момент и что должно начинаться и останавливаться, но запустить таймер можно вот так. Если по окончании аякс запроса его надо остановить, то просто после того, как в див поместишь данные, сделай clearInterval(/* тут айдишник таймера */)

let d = document.getElementById('count');

function c(el) {
  let startN = 100000;
  let time = 0;
  d.textContent = startN;
  
  const timer = setInterval(() => {
    startN += 3;
    d.textContent = startN;
    time += 10;
    
    if(time > 5000) {
      clearInterval(timer);
      /*
        тут можно вместо ифа сделать аякс,
        дождаться завершения загрузки, поместить
        ответ в див и вызвать clearInterval
      */
    }
  }, 10);
}

c(d);

<div id="count">ss</div>

БЛОГ НА HUSL

Анимация счётчика

Ответы (2 шт):