アニメーションを複数回再生しないようにします

私はこのJSコードを持っています。スキル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(); 

     } 
    }); 
});

それは私がアニメーションの途中でスクロールする場合でもexecuted.Iはブール値を使用してみましたされているが、それは

出典

2017-01-22 Kalol Party

あなたはフラグ変数を追加することができ、何かのように：あなたはjqueryのAPI 1を（）これはあなたが見つけることができます

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

を使用し、一度だけ例えば実行するように要素を設定し使用することができます

$(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 
     } 
    }); 
});

出典

2017-01-22 20:09:29 Sam0

これは完璧に機能しました！ありがとう@ Sam0 –