社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

WigglingCaboose • 5 年前 • 1698 次点击  

以下代码每秒钟显示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
 
1698 次点击  
文章 [ 1 ]  |  最新文章 5 年前
Barmar
Reply   •   1 楼
Barmar    5 年前

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