javascript - 2 Javascript中的setTimeout无法正常工作

Question

我设法创建我的第一个函数来隐藏和显示 div，但是当我尝试使用 2 setTime 时，另一个 div 正在无限加载，我需要做的是在不同的时间集中显示 div，知道吗？
这是我的 JS 代码

function showDiv1() {
  // If there are hidden divs left
  if ($('.forHide:hidden').length) {
    // Fade the first of them in
    $('.forHide:hidden:first').fadeIn();
    if ($('.forHide:hidden').length >= 1) {
      $(".forHide").fadeOut(1500, function() {});
    }
    // And wait one second before fading in the next one
    myVar = setTimeout(showDiv1, 100);

  }
}

function showDiv2() {
  // If there are hidden divs left
  if ($('.forSlowMo:hidden').length) {
    // Fade the first of them in
    $('.forSlowMo:hidden:first').fadeIn();
    if ($('.forSlowMo:hidden').length >= 1) {
      $(".forSlowMo").fadeOut(1500, function() {});
    }
    // And wait one second before fading in the next one
    setTimeout(showDiv2, 1000);
  }
}

Answer 1

第一个项目的 .fadeIn 之后，如果还有其他隐藏项，则代码当前会将它们全部淡出:

 $('.forSlowMo:hidden:first').fadeIn();
 if ($('.forSlowMo:hidden').length >= 1) {
    // this line selects all, including the one just shown
    $(".forSlowMo").fadeOut(1500, function() {});
 }

您需要排除刚刚显示的内容:

 var x = $('.forSlowMo:hidden:first').fadeIn();
 if ($('.forSlowMo:hidden').length >= 1) {
    $(".forSlowMo").not(x).fadeOut(1500, function() {});
 }

更新的 fiddle :https://jsfiddle.net/hd8q1mox/1/

在 fiddle 中，我删除了 .forHide 部分，以便您可以看到 .slowMo 上的差异，因为它们出现在彼此之上。