javascript - 在最后一次迭代的每个()函数中更改变量值 - jQuery

Question

这是我的 fiddle link .

所以我会有多个步骤，应该一个接一个地制作动画。为了使它们一个接一个地动画化，我使用了一些 flag 变量。根据其值，相应的步骤应该是动画的。

但是有一个问题 - 它的值在第一步中没有被改变，这就是为什么当你点击 2(从时间轴)时只有第一步被动画化。当我在 each() 函数中一个一个地动画化每个箭头时，问题出在下面的部分，并且 flag 变量值在箭头的最后一次迭代中被更改:

var flag = 0;
function step_1(){
    jQuery(".step_1_nav").addClass('active_bullet_point');
    jQuery(".step_1 .label").addClass('active_label_text');

    var delay = 0;
    jQuery('.step_1 .arrows span').each(function(index) {
        var $this = $(this);
        var total = $('.step_1 .arrows span').length;
        $this.delay(delay).animate({opacity:1}, 100, function(){
            $this.addClass('white_animated_arrow');
            if (index === (total - 1)) {
                jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
                flag = 1;
            }
        });
        delay += 100;
    });
}

jQuery(".step_2_nav").click(function(){
    step_1();
    console.log(flag); /* here flag returns 0 instead of 1 */
    step_2();
});

当我放这部分的时候

if (index === (total - 1)) {
    jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
    flag = 1;
}

out of animate callback function flag 的值被更改为 1 但它立即发生而不等待最后一个箭头的迭代并且所有 2 个步骤都立即被动画化。

我在这里缺少什么？有什么想法吗？

Answer 1

我使用 setInterval()

JS FIDDLE DEMO

var counter_step1 = 0;
var counter_step2 = 0;
var step1Completed = false;
var timeDelay = 400; // set delay time accordingly

function step1() {

  $(".step_1 .label").addClass("active_label_text");
  var arrowCount = $(".arrows_down span").size();
  var myFisrt = setInterval(function() {
    if (counter_step1 < arrowCount) {
      counter_step1++
      $(".arrows_down span:nth-child(" + counter_step1 + ")").addClass("white_animated_arrow");
    } else {
      $(".step_1 .bullet_point").addClass("active_bullet_point");
      step1Completed = true;
      clearInterval(myFisrt);
    }
  }, timeDelay);
}


function step2() {
  var arrowCount = $(".arrows_up span").size();
  var mySecond = setInterval(function() {
    if (step1Completed) {
      $(".step_2 .label").addClass("active_label_text");
      if (arrowCount > counter_step2) {
        $(".arrows_up span:nth-child(" + arrowCount + ")").addClass("white_animated_arrow");
        arrowCount--
      } else {
        $(".step_2 .bullet_point").addClass("active_bullet_point");
        clearInterval(mySecond);
      }
    }
  }, timeDelay);
}

function setAnimation(myVALUE) {
  step1();
  if (myVALUE == "STEP2") { step2();  }
}

$(".step_1_nav").on('click', function() {
  setAnimation("STEP1");
});

$(".step_2_nav").on('click', function() {
  setAnimation("STEP2");
});