当对SetTimeout中的每个函数使用JavaScript时，会有奇怪的反应

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

您可以创建一个变量来检查动画是否已经完成。如果没有，评估动画，如果是，不要做任何事情。

“联合来文法典”固定：

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%'

});