JavaScriptの各関数にSetTimeoutを使用すると奇妙な反応が発生する

Question

setTimeout関数を使用して、JavaScriptで各関数を実行するときにエフェクトに遅延を追加します。

最初のループはうまく動作しますが、上にスクロールして再び下にスクロールすると、アイコンにグリッチがあります。

HTMLコード

<div id="box"></div> 
<div class="service-modules-section"> 
    <div class="service-modules"> 
    <div class="half service-row-left"> 

     <div class="service-item"> 
     <div class="icon-wrap"> 
      <img alt="Canadian News Reporting Icon" class="img-fluid" src="http://icons.iconarchive.com/icons/vcferreira/firefox-os/128/sms-icon.png" style="display: inline;" width=50px> 
     </div> 
     <div class="service-meta"> 
      <h3>News Reporting</h3> 
      <p>From breaking national, regional and world news to the biggest events in politics, sports, business and entertainment, we are there when it matters, delivering news about Canadians to Canadians, 24/7.ok.</p>   </div> 
     <div class="clearfix"></div> 
     </div> 
     <div class="service-item"> 
     <div class="icon-wrap"> 
      <img alt="Canadian News Reporting Icon" class="img-fluid" src="http://icons.iconarchive.com/icons/vcferreira/firefox-os/128/sms-icon.png" style="display: inline;" width=50px> 
     </div> 
     <div class="service-meta"> 
      <h3>News Reporting</h3> 
      <p>From breaking national, regional and world news to the biggest events in politics, sports, business and entertainment, we are there when it matters, delivering news about Canadians to Canadians, 24/7.ok.</p>   </div> 
     <div class="clearfix"></div> 
     </div> 
     <div class="service-item"> 
     <div class="icon-wrap"> 
      <img alt="Canadian News Reporting Icon" class="img-fluid" src="http://icons.iconarchive.com/icons/vcferreira/firefox-os/128/sms-icon.png" style="display: inline;" width=50px> 
     </div> 
     <div class="service-meta"> 
      <h3>News Reporting</h3> 
      <p>From breaking national, regional and world news to the biggest events in politics, sports, business and entertainment, we are there when it matters, delivering news about Canadians to Canadians, 24/7.ok.</p>   </div>    
    </div> 

    </div> 
</div> 
<div id="box"></div> 

CSSコード：

#box { 
    height: 600px; 
} 
.service-modules-section{ 
    position: relative; 
} 
img { 
    display: none; 
    position: relative; 
    top: 90px; 
} 

のJavaScriptコード：

var speed = 500; 
var waypoint = new Waypoint({ 
    element: $('.icon-wrap').children(), 
    handler: function(direction) {  
     $('.icon-wrap').children().each(function(k, v){ 
     var el = this; 
     setTimeout(function(){ 
      $(el).animate({ 
     'opacity': '70' 
    }, { 
     step: function (now, fx) {   
      $(el).css({"transform": "translate3d(0px, " + -now + "px, 0px)"}); 
     }, 
     duration: 1000, 
     easing: 'linear', 
     queue: false, 
     complete: function() { 
      // alert('Animation is done'); 
     } 
    }, 'linear'); 

    $(el).animate({ textIndent: 100 }, { 
     duration : 1000, 
     easing: 'linear', 
     queue: false 
    }); 
     }, k*speed);       

    }) 

    if(direction === "up"){ 
     $('.icon-wrap').children().css('top', '100px'); 
    } 
    }, offset: '75%' 
}); 

任意のアイデア何が起こるか？おかげで、

https://codepen.io/techcater/pen/jwJZZe

Answer 1

。そうスコープまたは閉鎖問題

var speed = 500; 
var waypoint = new Waypoint({ 
    element: $('.icon-wrap').children(), 
    handler: function(direction) { 
    if(direction === "down"){ 
     $('.icon-wrap').children().each(function(k, v){ 
     var el = this; 

     setTimeout(function(){ 
      $(el).animate({ 
      'opacity': '65' 
      }, { 
      step: function (now, fx) { 
       $(el).css({"transform": "translate3d(0px, " + -now + "px, 0px)"}); 
      }, 
      duration: 1000, 
      easing: 'linear', 
      queue: false, 
      complete: function() { 
      } 
      }, 'linear'); 

      $(el).animate({ textIndent: 100 }, { 
      duration : 1000, 
      easing: 'linear', 
      queue: false 
      }); 
     }, k*speed); 

     }); 
    } 

    if(direction === "up"){ 
     $('.icon-wrap').children().css({"opacity": "0"}); 
    } 
    }, offset: '75%' 
}); 

Answer 2

あなたはアニメーションが完了した場合、変数をチェックすることができます。そうでない場合はアニメーションを評価し、そうであれば何もしないでください。

JSコードを修正：私は最終的に上下にスクロールするときの条件を与えることで、このための解決策を見つけた

var speed = 500; 
var completed = false; 
var waypoint = new Waypoint({ 
    element: $('.icon-wrap').children(), 
    handler: function(direction) { 
    if (!completed) { 
     $('.icon-wrap').children().each(function(k, v){ 
     var el = this; 
     setTimeout(function(){ 
      $(el).animate({ 
     'opacity': '70' 
    }, { 
     step: function (now, fx) {   
      $(el).css({"transform": "translate3d(0px, " + -now + "px, 0px)"}); 
     }, 
     duration: 1000, 
     easing: 'linear', 
     queue: false, 
     complete: function() { 
      completed = true; 
     } 
    }, 'linear'); 

    $(el).animate({ textIndent: 100 }, { 
     duration : 1000, 
     easing: 'linear', 
     queue: false 
    }); 
     }, k*speed);       

    }) 

    if(direction === "up"){ 
     $('.icon-wrap').children().css('top', '100px'); 
    } 
    } 
    }, offset: '75%' 

});