注册    登录
关注
Py学习  »  Jquery

JQuery:使用setInterval以随机秒数显示文本

WigglingCaboose • 6 年前 • 1931 次点击  

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/49213
文章 [ 1 ]  |  最新文章 6 年前
Barmar
Reply   •   1 楼
Barmar    6 年前

使用 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.
登录后回复
关于   移动版
Py学习 - 专注于Python技术发展的社区(原Django社区)
沪ICP备11025650号