javascript - 当滚动触发时，JQuery 多次重复百分号

Question

我有 4 个进度条，当我在可见位置向下滚动时，百分比会显示多次。我正在尝试解决这个问题，但花了我所有的时间。当我添加 jquery 代码来触发滚动动画时，我得到了所有的重复。 任何建议将不胜感激。

 $(window).scroll( function(){

    var bottom_of_window = $(window).scrollTop() + $(window).height();
   
	        $(".skills").addClass("active")
$(".skills .skill .skill-bar span ").each(function() {
   $(this).animate({
      "width": $(this).parent().attr("data-bar") + "%"
   },0);
 
   $(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});


setTimeout(function() {
   $(".skills .skill .skill-bar  span b ") .animate({"opacity":"1"},1000);
}, 2000);
      });

/*SKILLS*/
.skills,
.skills .skill,
.skills .skill ,
.skills .skill .skill-bar {
   width: 100%;
   float: left;
}

.skill-title{
  float:left;
}

.skills {
   padding:13px;
  margin-top:10%;
}

.skills .skill {
   margin-bottom: 30px;
  
}

.skills .skill .skill-title {
   color: black;
   margin-bottom: 10px;
   font-weight: 400;
   font-size: 139%;
  opacity:.8;
  
}

.skills .skill .skill-bar {
   width: 0;
   height: 16px;
   background: #f0f0f0;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills.active .skill .skill-bar {
   width: 100%;
  
}

.skills .skill .skill-bar span {
   float: left;
   width: 0%;
   background: #1D91F2;
   height: 15px;
   position: relative;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills .skill .skill-bar span b {
   float: left;
   width: 100%;
   position: relative;
   text-align: right;
   opacity: 0;
   font-size: 145%;
   color: #1D91F2;
   font-weight: 400;
   top: -30px;
  
}


.info-list{
  font-size:25px;
  list-style: none;
  text-align: left;
  letter-spacing: .4rem;
	line-height: 4.1rem;
	  margin-top:10%;
 
  
}

.skills-part{
  width: 100%;
  max-width: 700px;
  
}


.h9-information{
   font-family: 'Squada One', cursive;

}

.h10-skills{
 font-family: 'Squada One', cursive;  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-part col-md-6">
  <h10 class="h10-skills"style="font-size:30px; opacity:0.9;"><strong>SKILLS</strong></h10>
<div class="skills">
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         HTML5</strong>
      </div>
      <!-- bar -->
      <div class="skill-bar" data-bar="90"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         CSS3
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="70"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JQUERY
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="60"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JAVASCRIPT
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="80"><span></span></div>
   </div>
   <!-- #skill -->
</div>

You can see all the duplicating

Answer 1

不必不断追加数据，只需更新 html，如下所示:

$(this).html('<b>' + $(this).parent().attr("data-bar") + '%</b>');