getting Maximum call stack size exceeded error after few seconds. What's wrong with this js code

Question

I want to show multi image slider with fadeIn fadeOut instead of sliding.

I'm getting this error "Maximum call stack size exceeded" .

What's wrong with this code ??

var totalLogos;
var current = [0, 1, 2, 3, 4, 5];
var lastframe = -1;

function updateLogos() {
  var randLogo = Math.floor(Math.random() * 6);
  if (randLogo === lastframe) {
    updateLogos();
    return
  }
  updateLogo(randLogo);
  lastframe = randLogo;
  TweenMax.delayedCall(1.5, updateLogos);
}

function updateLogo(num) {
  var nextImage = Math.floor(Math.random() * totalLogos);

  for (var i = 0; i < current.length-1; i++) {
    if (nextImage === current[i]) {
      updateLogo(num);
      return
    }
  }
  for (var i = 0; i < totalLogos; i++) {
    var logo = document.querySelectorAll('.clients_logo')[num].querySelectorAll('img')[i];

    if (logo.style.opacity > .5) {
      if (nextImage === i) {
        updateLogo(num);
        return
      }
      TweenMax.to(logo, .75, {
        autoAlpha: 0
      });
    } else {
      if (nextImage === i) {
        TweenMax.to(logo, .75, {
          autoAlpha: 1,
          delay: .25
        });
        current[num] = i;
      }
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  totalLogos = document.querySelector('.clients_logo').querySelectorAll("img").length;
  TweenMax.set('.clients_logo img', {
    autoAlpha: 0
  });
  for (var j = 0; j < current.length; j++) {
    for (var i = 0; i < totalLogos; i++) {
      if (j === i && i < current.length) {
        TweenMax.set(document.querySelectorAll('.clients_logo')[j].querySelectorAll('img')[i], {
          autoAlpha: 1
        });
      }
    }
  }
  TweenMax.delayedCall(1, updateLogos);
});

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.justify-content-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}
.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}
.clients_logo_box .clients_logo {
    position: relative;
    width: 16%;
    height: 68px;
    margin: 30px 0 15px 0;
}
.clients_logo_box .clients_logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
  
  

<div class="clients_logo_box d-flex justify-content-between align-items-center">
  <div class="clients_logo 1 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
  <div class="clients_logo 2 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
  <div class="clients_logo 3 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
  <div class="clients_logo 4 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
  <div class="clients_logo 5 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
  <div class="clients_logo 6 col-2">
    <img src="https://i.picsum.photos/id/231/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/232/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/233/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/234/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/235/200/300.jpg" alt="client logo">
    <img src="https://i.picsum.photos/id/236/200/300.jpg" alt="client logo">
  </div>
</div>

try to read this https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error — Valerii Voronkov, Dec 31 '19 at 10:02

score 1 · Answer 1 · answered Dec 31 '19 at 10:03

You called updateLogos method in recursively.Please check that.

function updateLogos() {
  var randLogo = Math.floor(Math.random() * 6);
  if (randLogo === lastframe) {
    updateLogos();
    return
  }
  updateLogo(randLogo);
  lastframe = randLogo;
  TweenMax.delayedCall(1.5, updateLogos);
}

Radwan Abu-Odeh · Answer 2 · 2019-12-31T15:05:25.720

You are calling updateLogos function recursively without any base case to break the execution chain.

Check the snippet here:

function updateLogos() {
  var randLogo = Math.floor(Math.random() * 6);
  if (randLogo === lastframe) {
    \\---------> HERE <----------
    updateLogos();
    \\---------> HERE <----------
    return
  }
  updateLogo(randLogo);
  lastframe = randLogo;
  \\---------> HERE <----------
  TweenMax.delayedCall(1.5, updateLogos);
  \\---------> HERE <----------
}

To break down the error (Maximum call stack size exceeded) for you Every function call uses a Call Stack, whenever a function is called it will be pushed to the call stack, and once it finishes execution it gets popped from the stack.

Now every language has its own limits for such stack, in order to prevent infinite recursive calls like this.

Check this article form freeCodeCamp about How Recursion Works.

A suggested solution

Your condition that supposed to stop the updateLogos execution should be guaranteed to be met when the time is right to stop it

// This probably won't be true all the time, 
// because it is only true when you get 2 identical 
// random numbers after each `updateLogos` execution.
if (randLogo === lastframe) {
  // This line should be deleted for sure because 
  // it will cause infinite recursion.
  updateLogos(); 
  return;
}

Something like this would help

var totalLogos;
var current = [0, 1, 2, 3, 4, 5];
var framesAdded = 0;
function updateLogos() {
  var randLogo = Math.floor(Math.random() * 6);
  if (framesAdded === current.length) {
    return;
  }
  updateLogo(randLogo);
  framesAdded += 1;
  TweenMax.delayedCall(1.5, updateLogos);
}
...

Another solution

...
function updateLogos() {
  var randLogo = Math.floor(Math.random() * 6);
  updateLogo(randLogo);
}
setInterval(updateLogos, 1.5)
...

thanks for the replay. Your suggested solution will stop after few times. I need slider like GreenSock (https://greensock.com/) client section && i need 6 items. — Anzil khaN, Dec 31 '19 at 10:54
In case you wanted this code to run infinitely without crashing. you can use [`setInterval`](https://www.w3schools.com/jsref/met_win_setinterval.asp) function in JavaScript, it is much more easier to make this happen without any pain. — Radwan Abu-Odeh, Dec 31 '19 at 15:02

score 0 · Answer 3 · answered Dec 31 '19 at 10:18

0

You are calling your updateLogos() function recursively

TweenMax.delayedCall(1.5, updateLogos);

answered Dec 31 '19 at 10:18

Khursand Kousar

31
2

getting Maximum call stack size exceeded error after few seconds. What's wrong with this js code

3 Answers3

A suggested solution