javascript - JQuery 超时或端点计数

Question

我有一个计时器，它根据数据库中的一组结果来计数。但是，当数据不存在时，计时器将继续运行，没有超时或终点。

有没有办法在值不存在时不显示计时器或显示 0/40 请参阅下面的代码:

$(function() {
    function count($this) {
        var current = parseInt($this.html(), 10);
        $this.html(++current);
        if (current !== $this.data('count')) {
            setTimeout(function(){
                count($this)
            }, 50);
        }
    }        

    $(".fiveStarScore").each(function() {
        $(this).data('count', parseInt($(this).html(), 10));
        $(this).html('0');
        count($(this));
    });
}); 

这是目标 div，将停在所需的值。

<div>
    <span class="fiveStarScore"><?php echo $total_five_stars;?></span>/40
</div>

Answer 1

您可以通过检查加载时元素的文本值是否为 0 (或任何非数字值)来解决此问题，如果是，则不调用 count() :

$(function() {
  function count($el) {
    var current = parseInt($el.text(), 10);
    $el.html(++current);

    if (current !== $el.data('count')) {
      setTimeout(function() {
        count($el)
      }, 50);
    }
  }
  
  $(".fiveStarScore").each(function() {
    var $el = $(this);
    var total = parseInt($el.text(), 10) || 0;
    $el.data('count', total).text('0');
    
    if (total == 0)
       return;
    
    count($el);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span class="fiveStarScore">0</span>/40
</div>

<div>
  <span class="fiveStarScore">25</span>/40
</div>