单个页面超过多个轮播最大调用堆栈 Jquery/Vanilla Javascript

Question

所以我正在尝试使用 Jquery 实现无限自动播放多个轮播。我在同一页面上创建了两个不同的轮播块这是页面的正文

<div class="rotating_block">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>
</div>
<br>
<div class="rotating_block">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>
</div>

CSS 同样

.rotating_block {
  display: flex;
}
.one {
  background: red;
  height: 100px;
  width: 100px;
}

.two {
  background: green;
  height: 100px;
  width: 100px;
}

.three {
  background: blue;
  height: 100px;
  width: 100px;
}

在 JS 中，我为每个旋转木马创建了 slideIndex 数组和子（块）数组 slideIndex[n] 存储要显示的当前幻灯片编号 childrens[n] 存储 blocks/childrens

的数组

对于每个父项 div '.rotating_block' 我将其 slideIndex 及其子项存储在这些数组中并执行轮播功能。最后，我调用 setTimeout 以便每五秒再次运行该函数并更改幻灯片以提供类似旋转木马的效果问题是我正在获取最大调用超出堆栈/控制台每秒记录一次多次

var slideIndex = [];
  var childrens = [];
  $(".rotating_block").each(function (index) {
    slideIndex[index] = 0;
    childrens[index] = $(this).find(".block");
    function carousel(children, slideIndex) {
      console.log('hello world');
      for (let i = 0; i < children.length; i++) {
        $(children[i]).hide();
      }
      if (slideIndex > children.length) {
        slideIndex = 1;
      }
      $(children[slideIndex - 1]).show();
      setTimeout(carousel(children, slideIndex), 5000);
    }
    carousel(childrens[index], slideIndex[index]);
  });

link to pen

Answer 1

问题是您传递的函数 carousel 带有实际调用函数的参数。

setTimeout(carousel(children, slideIndex), 5000);

要解决这个问题，将箭头函数传递给 setTimeout

setTimeout(() => carousel(children, slideIndex), 5000);

编辑

此外，您忘记增加 slideIndex 值：

var slideIndex = [];
var childrens = [];
$(".rotating_block").each(function (index) {
  slideIndex[index] = 0;
  childrens[index] = $(this).find(".block");
  function carousel(children, slideIndex) {
    console.log(slideIndex);
    for (let i = 0; i < children.length; i++) {
      $(children[i]).hide();
    }
    //////////////////////
    slideIndex++;
    //////////////////////
    if (slideIndex > children.length) {
      slideIndex = 1;
    }
    $(children[slideIndex - 1]).show();
    setTimeout(() => carousel(children, slideIndex), 5000);
  }
  carousel(childrens[index], slideIndex[index]);
});

单个页面超过多个轮播最大调用堆栈 Jquery/Vanilla Javascript

multiple carousel maximum callstack exceeded on single page Jquery/Vanilla Javascript

html

javascript

css

jquery

carousel