Javascript 循环进度条不断循环

我在这里找到了一个循环进度脚本：

我把它添加到我的网站上，问题是我在页面的中间有这些元素（页面加载时不在视图中）。我的意图是在用户向下滚动到该位置时显示动画，但是效果会在每个滚动上循环。当元素进入视图并防止循环和/或重新启动时，如何使其仅运行一次

以下是我目前的代码：

CSS

HTML

塞德权杖
奎斯克氏

梅塞纳斯

佩伦茨克

苏达莱斯酒店

JavaScript

$(document).ready(function($){
    function animateElements(){
        $('.progressbar').each(function(){
            var elementPos  = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            var percent     = $(this).find('.circle').attr('data-percent');
            var percentage  = parseInt(percent, 10) / parseInt(100, 10);
            if(elementPos<topOfWindow+$(window).height()-30){
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percentage,
                    thickness: 14,
                    fill: { color: '#1B58B8' }
                }).on('circle-animation-progress', function(event,progress,stepValue) {
                    $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
                }).stop();
            }
        });
    }

    // Show animated elements
    animateElements();
    $(window).scroll(animateElements);
});

$（文档）.ready（函数（$）{
函数animateeelements（）{
$（'.progressbar'）。每个（函数（）{
var elementPos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
变量百分比=$（this.find（'.circle'）.attr（'data-percent'）；
var百分比=parseInt（百分比，10）/parseInt（100，10）；
如果（elementPos这是JSFIDLE:

在
上添加数据属性以检查动画是否播放。其初始值为
false
，因为动画尚未播放


在if语句
if（elementPos）上添加属性为false条件
<div style="width:100%;height:500px;"></div>
<h3>Sed scelerisque</h3>
<div class="progressbar">
    <div class="circle" data-percent="98"><div></div><p>Quisque's</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="30"><div></div><p>Maecenas</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="77"><div></div><p>Pellentesque</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="49"><div></div><p>Etiam sodales</p></div>
</div>
<div style="width:100%;height:500px;"></div>

$(document).ready(function($){
    function animateElements(){
        $('.progressbar').each(function(){
            var elementPos  = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            var percent     = $(this).find('.circle').attr('data-percent');
            var percentage  = parseInt(percent, 10) / parseInt(100, 10);
            if(elementPos<topOfWindow+$(window).height()-30){
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percentage,
                    thickness: 14,
                    fill: { color: '#1B58B8' }
                }).on('circle-animation-progress', function(event,progress,stepValue) {
                    $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
                }).stop();
            }
        });
    }

    // Show animated elements
    animateElements();
    $(window).scroll(animateElements);
});

$('.progressbar').each(function(){
    var elementPos  = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    var percent     = $(this).find('.circle').attr('data-percent');
    var percentage  = parseInt(percent, 10) / parseInt(100, 10);
    var animate = $(this).data('animate');
    if(elementPos<topOfWindow+$(window).height()-30 && !animate){
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
            startAngle: -Math.PI / 2,
            value: percentage,
            thickness: 14,
            fill: { color: '#1B58B8' }
        }).on('circle-animation-progress', function(event,progress,stepValue) {
            $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
        }).stop();
    }
});