JQuery:使用 setInterval 每隔随机的秒数显示文本

Question

以下代码每秒显示从 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”，以确保每个数字需要随机的时间才能出现。

Answer 1

使用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.