Slideshow error "RangeError: Maximum call stack size exceeded

Question

I am trying to add this image slideshow into my website, However keeping running into a MAximum call stack size exceeded. The slider runs through the images not in the time interval set and then the error occurs

var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch
     
// Image List
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";

// Change Image
function changeImg(){
    document.slide.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;

`setTimeout` needs a function not a string. `setTimeout(changeImg, time);` — Reyno, Jan 25 '21 at 14:04
@Reyno https://stackoverflow.com/questions/4506074/settimeout-with-string-or-anonymous-function-reference-speedwise — mplungjan, Jan 25 '21 at 14:08
Try removing the last line of the function `changeImg()` and replace the line `window.onload=changeImg;` with `window.onload=setInterval(changeImg, time);` — secan, Jan 25 '21 at 14:10
The code is somewhat obsolete but when I fix the URLs it works fine as-is: https://jsfiddle.net/0jk8hfom/ — , Jan 25 '21 at 14:11
Also, is `document.slide.src` correct? Shouldn't it be something like `document.getElementById('your-slider-id').src`? — secan, Jan 25 '21 at 14:12
"Maximum call stack size exceeded" is triggered by a function that calls itself over and over again. `setTimeout()` won't trigger that error. — Andreas, Jan 25 '21 at 14:13
Here's a more modern version that keeps loading a new image for each category: https://jsfiddle.net/0jk8hfom/1/ — , Jan 25 '21 at 14:17
how slide be add to document? Generally html is the only child of the document. — vipcxj, Jan 25 '21 at 14:20
@vipcxj [Do DOM tree elements with ids become global variables?](https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) — Andreas, Jan 25 '21 at 14:25
@Andreas And I found document.slide not work, but slide work. At least It's true for the newest chrome. — vipcxj, Jan 25 '21 at 14:44
Further building on @ChrisG's comments; you could also try reducing the global variables by adding arguments to the functions you need (the global variable `i` might be particularly troublesome in terms of creating conflicts with other code): https://jsfiddle.net/aewxjdp6/ — secan, Jan 25 '21 at 15:37

mplungjan · Answer 1 · 2021-01-25T14:33:09.370

-2

I am posting this as an answer to have a minimal, complete and verifiable example (mcve) to make sure that the slider is not the culpritd, the code will not give that error.

Here is current syntax - if that still gives an error then there is certainly something else wrong

let i = 0, img;
const images = ["https://via.placeholder.com/150/0000FF/808080?text=Image1",
    "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image2",
    "https://via.placeholder.com/150/FFFF00/000000?text=Image3",
    "https://via.placeholder.com/150/000000/FFFFFF/?text=Image4"
  ];

const changeImg = function() {
  slide.src = images[i];
  i++;
  if (i >= images.length) i = 0;
}

window.addEventListener("load", function() {
  img = document.getElementById("slide");
  changeImg();
  setInterval(changeImg, 2000);
})

<img id="slide" />

edited Jan 25 '21 at 14:33

answered Jan 25 '21 at 14:14

mplungjan

169,008
28
173
236

_"Apart from document.slide.src looking very weird"_ - But it works. _"and the rest of syntax is not pleasant"_ - What's the problem here? _"the code will not give that error"_ - As already said in the comments. So... Why is there an "answer" for working code? – Andreas Jan 25 '21 at 14:21
Seems not a valid answer. – vipcxj Jan 25 '21 at 14:22
@Andreas - updating the code to current level could help clearing that part of the issue. Anyway, feel free to vote down. We will not know until OP answers our comments – mplungjan Jan 25 '21 at 14:25

Slideshow error "RangeError: Maximum call stack size exceeded

1 Answers1