Javascript 停止动画播放多次

我有这个JS代码。每当我滚动到skills div时，动画就会重复。我希望它只在用户到达div时加载一次，然后永远不要重复，除非再次加载页面

$(function() {
    var oTop = $('#skills').offset().top - window.innerHeight;
    var x = true;

    $(window).scroll(function(){

        var pTop = $('body').scrollTop();
        console.log( pTop + ' - ' + oTop ); 
        if(pTop > oTop){
              start_doughnut_animation();

        }
    });
});

---

它即使在我正在执行的动画中间滚动，我尝试使用布尔但它不工作

让你自己从循环中逃脱。

---

首先检查功能是否已运行。例如，如果var executed为false，则运行动画函数。在动画结束时，将escape变量executed设置为true。

您可以添加一个标志变量，例如：

$(function() {
    var oTop = $('#skills').offset().top - window.innerHeight;
    var x = true,
        oneTime = false;

    $(window).scroll(function(){

        var pTop = $('body').scrollTop();
        console.log( pTop + ' - ' + oTop ); 
        if(pTop > oTop && !oneTime){  // check if oneTimeis also false
              start_doughnut_animation();
              oneTime = true; // set oneTime so this can't happen again
        }
    });
});

---

您可以使用jquery api one将元素设置为只运行一次，例如使用

 $(window).one( "scroll", function() {

您可以在这里找到更多文档