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

Question

So I'm trying to implement an infinite autoplay multiple carousel using Jquery. I have created two different carousel blocks on same page this is the body of the page

<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 for the same

.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;
}

In JS i've created slideIndex array and childrens (blocks) array for each carousel slideIndex[n] stores current slide number to show while childrens[n] stores array of blocks/childrens

For each parent div '.rotating_block' I'm storing its slideIndex and its children in those arrays and performing the carousel function. At the end I'm calling for setTimeout so as to run the function once again every five seconds and change the slide to give carousel like effect the problem is I'm getting max call exceeded stack / console getting logged every second multiple times

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

Developer · Accepted Answer · 2021-04-03T06:59:10.550

The problem is that you are passing the function carousel with parameters which is actually calling the function.

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

To solve this, pass an arrow function to setTimeout

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

EDIT

Also, you forgot to increment the slideIndex value:

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

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

1 Answers1