Javascript 滚动功能——动画在视口中触发不止一次，而不是一次答案

【问题标题】：Javascript scroll function – animation firing more than once when in view port instead of onceJavascript 滚动功能——动画在视口中触发不止一次，而不是一次
【发布时间】：2018-07-13 13:55:02
【问题描述】：

我制作的动画在滚动到视图中时会触发，但它会在每次滚动时触发，而不仅仅是一次。在我的本地版本中添加 $(window).off('scroll');停止函数的多次触发，但会破坏我单独运行的其他滚动动画。

我不确定我在这里错过了什么，所以任何帮助都会很棒:)

$(document).ready(function ($) {

  function animateStatsBarVertical() {
    $('.progress-vertical--container').each(function () {

      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();

      if ( elementPos < topOfWindow + $(window).height() - 30 ) {

        function statsBarVertical() {

          var stats = document.getElementById("stats");
          var percentage = document.getElementById("percentage");
          var height = 1;
          var id = setInterval(frame, 10);
          var results_percentage_verticle = '<?php the_field("results_percentage_verticle", $p); ?>';

            function frame() {
              if (height >= results_percentage_verticle) {
                clearInterval(id);
              } else {
                height++;
                stats.style.height = height + '%';
                percentage.innerHTML = height * 1 + '%';
              }
            }

        }

        statsBarVertical();

      }

    });
  }
  animateStatsBarVertical();
  $(window).scroll(animateStatsBarVertical);
 


});

.progress-vertical--container {
  position: absolute;
  left: 15px;
  bottom: 200px;
  width: 100px;
  text-align: center;

}

.progress-vertical--container .stats-info {
  max-width: 85px;
  width: 100%;
  margin: 0 auto 10px;
}

.progress-vertical--container .info {
  font-size: 0.875em;
  font-family: "visby_round_cfmedium", sans-serif;
  font-weight: 700;
  color: green;
  text-transform: lowercase;
  text-align: center;
  width: 100%;
  line-height: 14px;
}

.progress-vertical--container .progress-vertical {
  width: 40px;
  height: 300px;
  background-color: grey;
  margin: 0 auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#stats {
  width: 100%;
  height: 1%;
  text-align: center;
  line-height: 30px;
  color: red;
  background-color: #d04e7c;
}

#percentage {
  font-size: 2em;
  font-family: "visby_round_cfmedium", sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-transform: lowercase;
  display: block;
}

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

<body style="background:red;height:2000px;position: relative;">



  <div class="progress-vertical--container">
    <!-- progress-vertical container : BEGIN -->
    <div class="stats-info">
      <div id="percentage"></div>
      <div class="info">This is a test</div>
    </div>
    <div class="progress-vertical">
      <div id="stats"></div>
    </div>
  </div>
  <!-- progress-vertical container : END -->



</body>

【问题讨论】：

标签： javascript jquery animation scroll

【解决方案1】：

您可以添加一个字段来跟踪您的动画事件是否已触发。首次触发后，将此字段设置为 true 并停止再次触发。

$(document).ready(function ($) {

  // Tracks if we're fired the event
  let fired = false;

  function animateStatsBarVertical() {
    $('.progress-vertical--container').each(function () {

      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();

      // Only true if the element is in view AND has not fired yet
      if ( elementPos < topOfWindow + $(window).height() - 30 && fired === false) {
        // We've fired, so set to true
        fired = true;

        function statsBarVertical() {
          var stats = document.getElementById("stats");
          var percentage = document.getElementById("percentage");
          var height = 1;
          var id = setInterval(frame, 10);
          var results_percentage_verticle = 100; // '<?php the_field("results_percentage_verticle", $p); ?>';

            function frame() {
              if (height >= results_percentage_verticle) {
                clearInterval(id);
              } else {
                height++;
                stats.style.height = height + '%';
                percentage.innerHTML = height * 1 + '%';
              }
            }

        }

        statsBarVertical();

      }

    });
  }
  animateStatsBarVertical();
  $(window).scroll(animateStatsBarVertical);
 


});

.progress-vertical--container {
  position: absolute;
  left: 15px;
  bottom: 200px;
  width: 100px;
  text-align: center;

}

.progress-vertical--container .stats-info {
  max-width: 85px;
  width: 100%;
  margin: 0 auto 10px;
}

.progress-vertical--container .info {
  font-size: 0.875em;
  font-family: "visby_round_cfmedium", sans-serif;
  font-weight: 700;
  color: green;
  text-transform: lowercase;
  text-align: center;
  width: 100%;
  line-height: 14px;
}

.progress-vertical--container .progress-vertical {
  width: 40px;
  height: 300px;
  background-color: grey;
  margin: 0 auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#stats {
  width: 100%;
  height: 1%;
  text-align: center;
  line-height: 30px;
  color: red;
  background-color: #d04e7c;
}

#percentage {
  font-size: 2em;
  font-family: "visby_round_cfmedium", sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-transform: lowercase;
  display: block;
}

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

<body style="background:red;height:2000px;position: relative;">



  <div class="progress-vertical--container">
    <!-- progress-vertical container : BEGIN -->
    <div class="stats-info">
      <div id="percentage"></div>
      <div class="info">This is a test</div>
    </div>
    <div class="progress-vertical">
      <div id="stats"></div>
    </div>
  </div>
  <!-- progress-vertical container : END -->



</body>

【讨论】：

@moody1208 很高兴它有帮助！