JQuery: показывать текст каждые произвольные секунды, используя setInterval - PullRequest
Новая
       8

JQuery: показывать текст каждые произвольные секунды, используя setInterval

3 голосов
/ 06 ноября 2019

Следующий код показывает числа от 1 до 10 каждую секунду: 

(function() {
  var timesRun = 0;
  var runLimit = 10;

  i = 0;

  setInterval(function() {

    if (timesRun < runLimit) {
      timesRun += 1;

      $('#changing-number').fadeOut(function() {
        $(this).html(timesRun).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 numbers have been displayed.

Однако я не хочу, чтобы каждое число появлялось точно каждую секунду. Я хотел бы промежуток от 1 до 3 секунд, меняющийся случайным образом каждый раз. Например, для отображения первого числа может потребоваться 2,2 секунды, для отображения следующего номера может потребоваться еще 1,4 секунды, для отображения следующего может потребоваться еще 2,9 секунды и т. Д. В принципе, я не уверен, что поставить вместо«1000» в функции, чтобы убедиться, что каждому числу требуется произвольное время для появления.

1 Ответ

2 голосов
/ 06 ноября 2019

Используйте setTimeout() для запуска следующей итерации вместо setInterval() и рассчитывайте время ожидания случайным образом каждый раз. 

(function() {
  var timesRun = 0;
  var runLimit = 10;

  i = 0;

  function updateCounter() {
    if (timesRun < runLimit) {
      var timeout = 2000 * Math.random() + 1000; // random timeout from 1000 to 3000
      setTimeout(function() {
        $('#changing-number').fadeOut(function() {
          $(this).html(timesRun).fadeIn();
        });
        timesRun++;
        updateCounter();
      }, timeout);
    }
  }
  updateCounter();
})();
<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 numbers have been displayed.
...