简单JS滑块上的递归过多

Question

I am trying to build a simple slider by changing the background image, but i am not sure why I am getting an error that says too much recursion.

document.addEventListener("DOMContentLoaded", function(event) {

let headerImages = [];
let header = document.querySelector('.header');
let i = 0;
let time = 3000;

headerImages[0] = 'img/header1.jpg';
headerImages[1] = 'img/header2.jpg';


function changeHeaderImg() {
    header.style.backgroundImage = "url(" + headerImages[i] + ")";

    if(i < headerImages.length - 1){
        i++;
    } else {
        i = 0;
    }

    setTimeout(changeHeaderImg(), time);
}

changeHeaderImg();



});

Answer 1

You are calling changeHeaderImg and passing it's result to setTimeout instead of passing changeHeaderImg itself.

So you are getting endless recursion which results in so-called "stack overflow" classic error.

Try setTimeout(changeHeaderImg, time);

Answer 2

A function that calls itself is called a recursive function. Once a condition is met, the function stops calling itself. This is called a base case.

In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). When there are too many function calls, or a function is missing a base case, JavaScript will throw this error.

function loop(x) {
  if (x >= 10) // "x >= 10" is the exit condition
    return;
  // do stuff
  loop(x + 1); // the recursive call
}
loop(0);

Setting this condition to an extremely high value, won't work:

function loop(x) {
  if (x >= 1000000000000)
    return;
  // do stuff
  loop(x + 1);
}
loop(0);
// InternalError: too much recursion

This recursive function is missing a base case. As there is no exit condition, the function will call itself infinitely.

function loop(x) {
 // The base case is missinng
loop(x + 1); // Recursive call
}
loop(0);
// InternalError: too much recursion