Javascript jQuery脚本不断重复

我有以下脚本，当用户从顶部滚动200px并设置一些自定义圆圈的动画时，该脚本将

fadeIn

a div。这是可行的（我想这不是最好的方式，我已经向getter抛出了一些脚本来让它工作）

我的剧本：

$(window).scroll(function() {
    if ($(this).scrollTop() > 200){ // 235  
        $('.hideme').fadeIn(2000);
    }
    $('.first.circle').circleProgress({
        value: 1,
        startAngle: -Math.PI / 1 * 1,
        fill: {gradient: [['#ff6600', .3], ['#f2833a', .7]], gradientAngle: Math.PI / 4}
    }).on('circle-animation-progress', function(event, progress, stepValue) {
        $(this).find('strong').html(Math.abs(36 * progress).toFixed(0) + '');
    });

    $('.second.circle').circleProgress({
        fill: {gradient: ['#0681c4', '#0681c4']},
        startAngle: -Math.PI / 1 * 2,
        value: 1
    }).on('circle-animation-progress', function(event, progress) {
        $(this).find('strong').html(Math.round(160 * progress) + '');
    });

    $('.third.circle').circleProgress({
        startAngle: -Math.PI / 3 * 3,
        value: 1,
        fill: {gradient: [['#09c109', .9], ['#298e29', .1]], gradientAngle: Math.PI / 4}
    }).on('circle-animation-progress', function(event, progress, stepValue) {
        $(this).find('strong').html(Math.abs(9.4 * progress).toFixed(1) + '');
    });
})

问题是，如果我只是向上或向下滚动一点，脚本会不断重复它自己吗？我好像不知道这是怎么回事？我怎样才能阻止这一切的发生

我已经看过了，那里给出的答案似乎不起作用。 如果有人有其他脚本执行同样的操作

---

我所要做的就是让div

.hideme

fadeIn出现在页面的视口中，然后启动圆形动画。。。提前谢谢

您可以这样编写Jquery

$（窗口）。一个（“滚动”，function（）{

，这将只绑定它一次。

var lastPosition=0；
var lastPosition = 0;
$(window).on('scroll', function () {
    let scrollTop = $(this).scrollTop();
    let $hideMe = $('.hideme');
    let $firstCircle = $('.first.circle');
    let $secondCircle = $('.second.circle');
    let $thirdCircle = $('.third.circle');
    if (lastPosition <= 200 && scrollTop > 200){ // 235  
        // if the last scroll position is under 201 and
        // the actual position is above 200, start the animations

        $hideMe.fadeIn(2000);

        $firstCircle.circleProgress({
            value: 1,
            startAngle: -Math.PI / 1 * 1,
            fill: {gradient: [['#ff6600', .3], ['#f2833a', .7]], gradientAngle: Math.PI / 4}
        }).on('circle-animation-progress', function(event, progress, stepValue) {
            $(this).find('strong').html(Math.abs(36 * progress).toFixed(0) + '');
        });

        $secondCircle.circleProgress({
            fill: {gradient: ['#0681c4', '#0681c4']},
            startAngle: -Math.PI / 1 * 2,
            value: 1
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(Math.round(160 * progress) + '');
        });

        $thirdCircle.circleProgress({
            startAngle: -Math.PI / 3 * 3,
            value: 1,
            fill: {gradient: [['#09c109', .9], ['#298e29', .1]], gradientAngle: Math.PI / 4}
        }).on('circle-animation-progress', function(event, progress, stepValue) {
            $(this).find('strong').html(Math.abs(9.4 * progress).toFixed(1) + '');
        });
    } else if (scrollTop <= 200) {
        // if the current position is under 201, cancel the animations

        $hideMe.fadeOut(200);

        // ....
        // cancel all the circles, you'll have to check the correct methods needed
        // ....
    }

    lastPosition = scrollTop;
});

$（窗口）.on（'scroll'，函数（）{
让scrollTop=$（this.scrollTop（）；
设$hideMe=$（'.hideMe'）；
让$firstCircle=$（'.first.circle'）；
设$secondCircle=$（'.second.circle'）；
让$thirdCircle=$（'.third.circle'）；
如果（最后位置200）{//235
//如果最后一个滚动位置低于201和
//实际位置高于200，开始动画
$hideMe.fadeIn（2000年）；
$firstCircle.circleProgress({
价值：1，
startAngle:-Math.PI/1*1，
填充：{gradient:['#ff6600'，.3]，'#f2833a'，.7]]，gradientrange:Math.PI/4}
}).on（'circle-animation-progress'，函数（事件、进度、步长值）{
$（this.find（'strong'）.html（Math.abs（36*progress）.toFixed（0）+''；
});
$secondCircle.circleProgress({
填充：{梯度：['#0681c4'，'#0681c4']}，
startAngle:-Math.PI/1*2，
价值：1
}).on（'circle-animation-progress'，函数（事件、进度）{
$（this.find（'strong'）.html（Math.round（160*progress）+''）；
});
$thirdCircle.circleProgress({
startAngle:-Math.PI/3*3，
价值：1，
填充：{gradient:['#09c109'，.9]，'#298e29'，.1]]，gradientrange:Math.PI/4}
}).on（'circle-animation-progress'，函数（事件、进度、步长值）{
$（this.find（'strong'）.html（Math.abs（9.4*progress）.toFixed（1）+''；
});
}else if（scrollTop每次滚动一点点，都会触发多个滚动事件-你需要重新思考你的逻辑它会不断重复自己，因为一旦你从页面顶部开始超过200px的阈值，你的if总是正确的，是的，这就是我想的：）小心，你正在分配
（'circle-animation-progress'
每次滚动。这将为
circle
s生成数千个事件处理程序。如果我执行类似
if.hideme具有不透明性1的操作，会怎么样？然后运行circle代码？这与他的问题无关。@silentw：如果我理解正确，每当用户滚动时就会调用他的方法通过页面，正如他要求的那样，他希望它只执行一次动画。好的，但这只在第一次鼠标滚动时起作用，即使它不是
scrollTop（）>200
，然后会“关机”。太棒了。这很有效。如果需要，我可以试一下。谢谢！