当可见区域中有多个元素时，为什么我的计数器会倒数？

Question

我希望我的视觉计数器在可见区域内才启动。我为此尝试了不同的版本，但没有一个人能正常工作。

计数器正确启动，但是只要可见区域中的元素超过一个，它就会再次向后计数。谁发现错误或有解决方案？

这是简单的计数器-没有滚动。这里是可以的计数器：https://jsfiddle.net/LukasHH/7hfgzajk/

这是版本2。函数counter script中有myfunc()。当可见区域中有一个元素时，计数器将从此处正确开始。当可见区域中有一个以上的元素时，则开始正确，但又重新计数。 （滚动到第二个元素）

// inViewport jQuery plugin
// http://stackoverflow.com/a/26831113/383904
jQuery(function($) {
  var win = $(window);
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el){
      function visPx(){
        var H = $(this).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
      } visPx();
      $(win).on("resize scroll", visPx);
    });
  };
});

jQuery(function($) { // DOM ready and $ in scope

  jQuery(".half-circle").inViewport(function(px) { // Make use of the `px` argument!!!
    // if element entered V.port ( px>0 ) and
    // if prop initNumAnim flag is not yet set
    //  = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
	  
	  $(this).addClass('in-view');
	  myfunc();
    }
  });
  
  function myfunc(){
		jQuery('.half-circle.in-view .count').each(function(){
	
			var n_val = $(this).text();
			n_val = (n_val.indexOf(',')> -1) ? n_val.replace(',', '.') : n_val;
			var n_res = n_val.split(".")[1] ? n_val.split(".")[1] : '';
			var n_int = parseInt(n_val);
			
			jQuery(this).prop('Counter',0).animate({
				Counter: n_int
			}, {
				duration: 3000,
				easing: 'swing',
				step: function (now) {
						var e = parseInt(Math.ceil(now))+parseFloat(parseInt(n_val)-n_int);
						e = ($(this).text().indexOf(',')> -1) ? e + "," + n_res : e;
						e = ($(this).text().indexOf('.')> -1) ? e + "." + n_res : e;
					$(this).text(e);
				},
				complete: function() {
					$(this).addClass('loaded');
					$(this).removeClass('count');
				}				
			});
		});
  }
});

.half-circle {
    width: 200px;
    height: 150px;
    position: relative;
    display: inline-block;
    margin: 20px;
}

.half-circle > p {
    width: 100%;
    position: absolute;
    top: 66.6%;
    text-align: center;
    font-size: 1.5em;
    margin: 0;
}

.half-circle-area {
    width: 100%;
    height: 66.6%;
    position: absolute;
    overflow: hidden;
}

.half-circle-move, .half-circle-overlay, .half-circle-fill {
    position: absolute;
    width: 80%;
    height: 80%; /* as the half of the width */
    border-top-left-radius: 120px;  /* 100px of height + 10px of border */
    border-top-right-radius: 120px; /* 100px of height + 10px of border */
    border: 20px solid lightgrey;
    transform-origin: 50% 100%;
    border-bottom: 0;
}

.half-circle-fill {
  border-color: gold;
}

.half-circle.in-view .half-circle-move {
  animation: move 3s ease-in-out;
}

.half-circle.in-view .half-circle-overlay {
  display: none;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
}

.half-circle-fill > span {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-size: 2.5em;
  color: lightgrey;
}


.break {
 background-color: lightgrey;
 width: 100%;
 height: 250px;
 vertical-align: middle;
 text-align: center;
 font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>A half circle with animation on scroll</h2>
	<h4>70.75$</h4>
	<p>
	Define the percent as transform rotate in the html style tag
	<br>Prozent in Grad berechnen: (Prozent * 1.8)
	<br>Beispiel: 70% = (70 * -1.8) => 126deg
	<br>Beispiel: 0% = (0 * 1.8) => 0deg
	<br>Beispiel: 30% = (30 * 1.8) => 54deg
	<br>Beispiel: 50% = (50 * 1.8) => 90deg
	</p>
	<div class="half-circle in-view">
	  <div class="half-circle-area">
		<div class="half-circle-fill"><span class="count">70.00$</span></div>
		<div class="half-circle-move" style="transform: rotate(126deg);"></div>
		<div class="half-circle-overlay"></div>
	  </div>
		<p>Title</p>
	</div>
  <div class="break">Sidebreak scroll down</div>
	<hr>
	<h2>A half circle with animation on scroll</h2>
	<h4>45,55€</h4>
	<p>
	Define the percent as transform rotate in the html style tag
	<br>Prozent in Grad berechnen: (Prozent * 1.8)
	<br>Beispiel: 70% = (70 * -1.8) => 126deg
	<br>Beispiel: 0% = (0 * 1.8) => 0deg
	<br>Beispiel: 30% = (30 * 1.8) => 54deg
	<br>Beispiel: 50% = (50 * 1.8) => 90deg
	</p>
	<div class="half-circle">
	  <div class="half-circle-area">
		<div class="half-circle-fill" style="border-color: #4CAF50;"><span class="count">45,55€</span></div>
		<div class="half-circle-move" style="transform: rotate(54deg);"></div>
		<div class="half-circle-overlay"></div>
	  </div>
		<p>Title</p>
	</div>
  	<div class="half-circle">
	  <div class="half-circle-area">
		<div class="half-circle-fill" style="border-color: #4CAF50;"><span class="count">15,35€</span></div>
		<div class="half-circle-move" style="transform: rotate(54deg);"></div>
		<div class="half-circle-overlay"></div>
	  </div>
		<p>Title</p>
	</div>
	<hr>
	<h2>A half circle with animation on scroll</h2>
	<h4>30</h4>
	<p>
	Define the percent as transform rotate in the html style tag
	<br>Prozent in Grad berechnen: (Prozent * 1.8)
	<br>Beispiel: 70% = (70 * -1.8) => 126deg
	<br>Beispiel: 0% = (0 * 1.8) => 0deg
	<br>Beispiel: 30% = (30 * 1.8) => 54deg
	<br>Beispiel: 50% = (50 * 1.8) => 90deg
	</p>
	<div class="half-circle">
	  <div class="half-circle-area">
		<div class="half-circle-fill" style="border-color: skyblue;"><span class="count">30</span></div>
		<div class="half-circle-move" style="transform: rotate(54deg);"></div>
		<div class="half-circle-overlay"></div>
	  </div>
		<p>Title</p>
	</div>

这是版本3-但是效果相同，但带有其他滚动脚本

https://jsfiddle.net/LukasHH/y0dLnm56/

更新时间：2019-05-22 在上部，在调用函数的地方，我让控制台告诉我何时设置了css类。 console.log('add view: ' + (x++));

为进行另一次检查，我对Myfunc函数中的JS代码进行了一些更改。我得到了.each（）输出的索引，我自己的计数器和找到的数字。 console.log(index + '| ' + (c++) + ' - val: ' + n_val);

结果是它在第一次调用该函数时可以正确识别该值。在第二次调用中，只有第二个值可以正确识别。

0| 0 - val: 10.15
add view: 0
0| 0 - val: 0.15
1| 1 - val: 15.35
add view: 1

如果添加第三个元素，则只能正确识别最后一个值。

0| 0 - val: 10.15
add view: 0
0| 0 - val: 0.15
1| 1 - val: 15.35
add view: 1
0| 0 - val: 0.15
1| 1 - val: 0.35
2| 2 - val: 25.45
add view: 2

错误值从何而来？

// inViewport jQuery plugin
// http://stackoverflow.com/a/26831113/383904
jQuery(function($) {
  var win = $(window);
  $.fn.inViewport = function(cb) {
    return this.each(function(i, el) {
      function visPx() {
        var H = $(this).height(),
          r = el.getBoundingClientRect(),
          t = r.top,
          b = r.bottom;
        return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
});


jQuery(function($) { // DOM ready and $ in scope
  var x = 0;
  jQuery(".half-circle").inViewport(function(px) { // Make use of the `px` argument!!!
    // if element entered V.port ( px>0 ) and
    // if prop initNumAnim flag is not yet set
    //  = Animate numbers
    if (px > 0 && !this.initNumAnim) {
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation

      $(this).addClass('in-view');
      myfunc();
      console.log('add view: ' + (x++));
    }
  });

  function myfunc() {
    var c = 0;

    jQuery('.half-circle.in-view .count').each(function(index) {

      var n_val = $(this).text();
      n_val = (n_val.indexOf(',') > -1) ? n_val.replace(',', '.') : n_val;
      var n_res = n_val.split(".")[1] ? n_val.split(".")[1] : '';
      var n_int = parseInt(n_val);

      console.log(index + '| ' + (c++) + ' - val: ' + n_val);
      //$(".console").html($(".console").html() + '<p>' + index + '| ' + (c++) + ' - val: ' + n_val + '</p>');

      jQuery(this).prop('Counter', 0).animate({
        Counter: n_int
      }, {
        duration: 100,
        easing: 'swing',
        step: function(now) {
          var e = parseInt(Math.ceil(now)) + parseFloat(parseInt(n_val) - n_int);

          //console.log(index + '| ' + (c++) + ' - val: ' + n_val + ' - int: ' + n_int + ' - e: ' + e );

          e = ($(this).text().indexOf(',') > -1) ? e + "," + n_res : e;
          e = ($(this).text().indexOf('.') > -1) ? e + "." + n_res : e;
          $(this).text(e);

        },
        complete: function() {
          $(this).removeClass('count').addClass('loaded');
        }
      });

    });
  }

});

.half-circle {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  margin: 20px;
}

.half-circle>p {
  width: 100%;
  position: absolute;
  top: 66.6%;
  text-align: center;
  font-size: 1.5em;
  margin: 0;
}

.half-circle-area {
  width: 100%;
  height: 66.6%;
  position: absolute;
  overflow: hidden;
}

.half-circle-move,
.half-circle-overlay,
.half-circle-fill {
  position: absolute;
  width: 80%;
  height: 80%;
  /* as the half of the width */
  border-top-left-radius: 120px;
  /* 100px of height + 10px of border */
  border-top-right-radius: 120px;
  /* 100px of height + 10px of border */
  border: 20px solid lightgrey;
  transform-origin: 50% 100%;
  border-bottom: 0;
}

.half-circle-fill {
  border-color: gold;
}

.half-circle.in-view .half-circle-move {
  animation: move 3s ease-in-out;
}

.half-circle.in-view .half-circle-overlay {
  display: none;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
}

.half-circle-fill>span {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-size: 2.5em;
  color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>A half circle with animation on scroll</h2>
<h4>70.75$</h4>
<p>
  Define the percent as transform rotate in the html style tag
  <br>Prozent in Grad berechnen: (Prozent * 1.8)
  <br>Beispiel: 70% = (70 * -1.8) => 126deg
  <br>Beispiel: 0% = (0 * 1.8) => 0deg
  <br>Beispiel: 30% = (30 * 1.8) => 54deg
  <br>Beispiel: 50% = (50 * 1.8) => 90deg
</p>
<div class="half-circle">
  <div class="half-circle-area">
    <div class="half-circle-fill"><span class="count">10.15</span></div>
    <div class="half-circle-move" style="transform: rotate(126deg);"></div>
    <div class="half-circle-overlay"></div>
  </div>
  <p>Title</p>
</div>
<div class="half-circle">
  <div class="half-circle-area">
    <div class="half-circle-fill"><span class="count">15.35</span></div>
    <div class="half-circle-move" style="transform: rotate(126deg);"></div>
    <div class="half-circle-overlay"></div>
  </div>
  <p>Title</p>
</div>
<div class="half-circle">
  <div class="half-circle-area">
    <div class="half-circle-fill"><span class="count">25.45</span></div>
    <div class="half-circle-move" style="transform: rotate(126deg);"></div>
    <div class="half-circle-overlay"></div>
  </div>
  <p>Title</p>
</div>
<hr style="margin: 50px 0;" />
<h2>A half circle with animation on scroll</h2>
<h4>45,55€</h4>
<p>
  Define the percent as transform rotate in the html style tag
  <br>Prozent in Grad berechnen: (Prozent * 1.8)
  <br>Beispiel: 70% = (70 * -1.8) => 126deg
  <br>Beispiel: 0% = (0 * 1.8) => 0deg
  <br>Beispiel: 30% = (30 * 1.8) => 54deg
  <br>Beispiel: 50% = (50 * 1.8) => 90deg
</p>
<div class="half-circle">
  <div class="half-circle-area">
    <div class="half-circle-fill" style="border-color: #4CAF50;"><span class="count">45,55€</span></div>
    <div class="half-circle-move" style="transform: rotate(54deg);"></div>
    <div class="half-circle-overlay"></div>
  </div>
  <p>Title</p>
</div>
<hr style="margin: 50px 0;" />
<h2>A half circle with animation on scroll</h2>
<h4>30</h4>
<p>
  Define the percent as transform rotate in the html style tag
  <br>Prozent in Grad berechnen: (Prozent * 1.8)
  <br>Beispiel: 70% = (70 * -1.8) => 126deg
  <br>Beispiel: 0% = (0 * 1.8) => 0deg
  <br>Beispiel: 30% = (30 * 1.8) => 54deg
  <br>Beispiel: 50% = (50 * 1.8) => 90deg
</p>
<div class="half-circle">
  <div class="half-circle-area">
    <div class="half-circle-fill" style="border-color: skyblue;"><span class="count">30</span></div>
    <div class="half-circle-move" style="transform: rotate(54deg);"></div>
    <div class="half-circle-overlay"></div>
  </div>
  <p>Title</p>
</div>