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

error rangeerror: maximum call stack size exceeded
maximum call stack size exceeded nodejs
error in maximum call stack size exceeded
maximum call stack size exceeded python
maximum call stack size exceeded npm
maximum call stack size exceeded angular
maximum call stack size exceeded javascript recursion
maximum call stack size exceeded react

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>

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

Maximum call stack size exceeded error, 30 Answers. It means that somewhere in your code, you are calling a function which in turn calls another function and so forth, until you hit the call stack limit. This is almost always because of a recursive function with a base case that isn't being met. If I run Array.apply(null, new Array(1000000)).map(Math.random); on Chrome 33, I get RangeError: Maximum call stack size exceeded Why?

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)
...

Getting error `Maximum call stack size exceeded` when have very , It got hang and saw the error Maximum call stack size exceeded Screenshot of Error : Text which I have used has 248kb in size when saved in a txt file. The content is pasted after a few seconds, but the editor is unusable,� Unfortunately, the node that writes on a local file is located in another tab so I cannot share the json flow file. Anyway I've now put a delay node (configure as a "rate limit") between the catch node and the debug node (that throws me the "maximum call stack size exceeded" error).

You are calling your updateLogos() function recursively

TweenMax.delayedCall(1.5, updateLogos);

RangeError: Maximum call stack size exceeded, below is my code. when i save and submit i get to go for next lesson but in out put i see an error || RangeError: Maximum call stack size exceeded ||. Any idea or any explanation for a super programmer.”); // james' second job james.sayJob ();� The problem causing the "RangeError: Maximum call stack size exceeded" is not related to the MQTT client. The MQTT client works correctly wiyh my current setup (NR v 0.20.07) and the MQTT in and out nodes are outside the TAB where the catch node (getting the errors and so causing NR to restart) is placed.

Uncaught RangeError: Maximum call stack size exceeded, This error is almost always means you have a problem with recursion in How to fix Maximum call stack size exceeded error That's when it's useful to wrap your recursive function call into a - Sometimes you get Maximum call stack size exceeded error if you accidentally import/embed the same JavaScript file twice. Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

MathJax: Getting [Math error] and "Error: Maximum call stack size , MathJax: Getting [Math error] and "Error: Maximum call stack size exceeded" I started off using the CDN and got [Math Error] when right clicking and asking for the My second guess is that your site might have "old CDN Mathjax url" in Site � agilliland changed the title Questions Issue Maximum call stack size exceeded May 25, 2016 salsakran added this to the 0.19.0 (tentative) milestone Jun 11, 2016 salsakran modified the milestones: 0.19.0 , 0.18.1 Jun 21, 2016

npm install fails with "npm ERR! Maximum call stack size exceeded", I couldn't get my dev environment working after that, so have been trying to set it up from Maximum call stack size exceeded" issue each time. NPM then runs for ~15 minutes until it hits "npm ERR! error-20200428 I thought it might be something to do with my theme, as it's a few years old, but I tried� Because you are calling the Falta every .5 seconds inside Falta method using setTimeout!. Remove this line from Falta() method.. var t = setTimeout(Falta(), 500) Also, you are redeclaring some of your varibales(di,ho etc).

Comments
  • try to read this stackoverflow.com/questions/6095530/…
  • thanks for the replay. Your suggested solution will stop after few times. I need slider like GreenSock (greensock.com) client section && i need 6 items.
  • In case you wanted this code to run infinitely without crashing. you can use setInterval function in JavaScript, it is much more easier to make this happen without any pain.