在单页Jquery/Javascript上超过了多个转盘最大调用堆栈

所以我尝试使用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>

在JS中，我为每个转盘创建了slideIndex数组和childrens（块）数组 slideIndex[n]存储当前幻灯片编号，以便在播放时显示 childrens[n]存储块/子块的数组

对于每个父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]);
  });

var slideIndex=[]；
var childrens=[]；
$（“.rotating_block”）。每个（函数（索引）{
slideIndex[索引]=0；
childrens[index]=$（this.find（“.block”）；
功能转盘（儿童、幻灯片索引）{
log（'helloworld'）；
for（设i=0；ichildren.length）{
slideIndex=1；
}
$（子项[slideIndex-1]）.show（）；
设置超时（旋转木马（儿童，滑动索引），5000）；
}
旋转木马（儿童[索引]、幻灯片索引[索引]）；
});

---

问题在于，您正在传递函数

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]);
});

var slideIndex=[]；
var childrens=[]；
$（“.rotating_block”）。每个（函数（索引）{
slideIndex[索引]=0；
childrens[index]=$（this.find（“.block”）；
功能转盘（儿童、幻灯片索引）{
console.log（slideIndex）；
for（设i=0；ichildren.length）{
slideIndex=1；
}
$（子项[slideIndex-1]）.show（）；
setTimeout（（）=>carousel（儿童，幻灯片索引），5000；
}
旋转木马（儿童[索引]、幻灯片索引[索引]）；
});

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]);
});