计算每个数字，直到它们等于数据attr

Question

我的酒吧很少。我想计算它们，直到它们与数据线值相等。你可以在下面看到我的代码。我使用了setInterval，当它们相等时，我想要clearInterval，但它不起作用。我在下面注释了这一行percent.html(counter + ' %');，因为它是无限的反击。 任何帮助我将不胜感激

＆＃13;

＆＃13;

$(document).ready(function() {

  var counter = 0;
  var processBar = $('.person-process');
  var percent = $('.person-process-percent .percentage');




  processBar.each(function() {
    var processTop = $(this).data('line');


    var id = setInterval(frameTop, 50);

    function frameTop() {

      if (counter === processTop) {
        clearInterval(id);
      } else {
        counter += 1;
        //percent.html(counter + ' %');
      }
    }
  });



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .process-bar {
    position: relative;
    max-width: 265px;
    height: 15px;
    background-color: #e4e4e4;
    border-radius: 8px;
    margin-bottom: 10px;
  }
</style>
<div class="person-box">


  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="34">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>


</div>

<div class="person-box">


  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="60">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>


</div>

<div class="person-box">


  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="80">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  var percent = $('.person-process-percent .percentage');

  $('.person-process').each(function() {
    var processTop = parseInt($(this).data('line'));
    var percent = $(this).find('.percentage');
    var counter = 0;
    var id = setInterval(frameTop, 50);

    function frameTop() {

      if (counter === processTop) {
        clearInterval(id);
      } else {
        counter++;
        percent.html(counter + ' %');
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .process-bar {
    position: relative;
    max-width: 265px;
    height: 15px;
    background-color: #e4e4e4;
    border-radius: 8px;
    margin-bottom: 10px;
  }
</style>
<div class="person-box">
  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="34">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>
</div>
<div class="person-box">
  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="60">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>
</div>
<div class="person-box">
  <div class="process-bar-wrapper">
    <div class="process-bar">
      <div class="person-process" data-line="80">
        <div class="person-process-percent"><span class="percentage"></span></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;