簡單JS滑塊上的遞歸過多

Question

我正在嘗試通過更改背景圖片來構建一個簡單的滑塊，但是我不確定為什么會收到錯誤消息，該錯誤表明遞歸過多。

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

您正在調用changeHeaderImg並將其結果傳遞給setTimeout而不是傳遞changeHeaderImg本身。

因此，您將獲得無窮的遞歸，從而導致所謂的“堆棧溢出”經典錯誤。

嘗試setTimeout(changeHeaderImg, time);

Answer 2

調用自身的函數稱為遞歸函數。 一旦滿足條件，該函數將停止調用自身。 這稱為基本情況。

在某些方面，遞歸類似於循環。 兩者都多次執行相同的代碼，並且都需要一個條件（避免無限循環，或者在這種情況下避免無限遞歸）。 當函數調用過多或函數缺少基本情況時，JavaScript將引發此錯誤。

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

將此條件設置為極高的值將不起作用：

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

此遞歸函數缺少基本情況。 由於沒有退出條件，因此該函數將無限調用自身。

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