javascript - 几秒钟后出现最大调用堆栈大小超出错误。这个js代码有什么问题

Question

我想用淡入淡出而不是滑动来显示多图像 slider 。

我收到此错误 “超出最大调用堆栈大小”。

这段代码有什么问题？？

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