幾秒鍾后獲得最大調用堆棧大小超出錯誤。 這個js代碼有什么問題

Question

我想用淡入淡出而不是滑動來顯示多圖像滑塊。

我收到此錯誤"Maximum call stack size exceeded" 。

這段代碼有什么問題？？

 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>

Answer 1

您以遞歸方式調用了 updateLogos 方法。請檢查。

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

Answer 2

您在沒有任何基本情況的情況下遞歸調用updateLogos函數來破壞執行鏈。

檢查這里的片段：

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

為您分解錯誤（ Maximum call stack size exceeded ）每個函數調用都使用一個Call Stack ，每當一個函數被調用時，它都會被推送到調用堆棧，一旦它完成執行，它就會從堆棧中彈出。

現在每種語言對這種堆棧都有自己的限制，以防止像這樣的無限遞歸調用。

從 freeCodeCamp 查看這篇關於遞歸如何工作的文章。

---

建議的解決方案

您應該保證在適當的時候停止updateLogos執行的條件得到滿足

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

這樣的事情會有所幫助

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

另一種解決方案

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

Answer 3

您正在遞歸調用 updateLogos() 函數

TweenMax.delayedCall(1.5, updateLogos);