javascript - 单击 slider 按钮后，js slider 调用堆栈加倍

Question

我有一个简单的 js slider ，可以在单击上一个或下一个按钮后更改 div 的背景颜色。它按预期工作，只是每次单击按钮后它都会加倍调用，因此窗口会在短时间内崩溃(即 2、4、8、16、32)。我不明白问题出在哪里，因此非常感谢您的帮助。这是工作链接pen和我的代码。HTML 代码:

<div class="skin">
 <div class="prev">
  <i class="flaticon-left-arrow"></i>
 </div>
 <div class="skin-color skin-color-1"></div>
 <div class="skin-color skin-color-2"></div>
 <div class="skin-color skin-color-3"></div>
 <div class="next">
  <i class="flaticon-right-arrow"></i>
 </div>
</div>

CSS部分:

    .skin {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 60px;
    }

    .prev, .next {
      width: 40px;
      height: 40px;
      background-color: #1c2028;
      border-radius: 100%;
      cursor: pointer;
      transition: 0.5s;
    }

    .prev:hover, .next:hover {
      box-shadow: 0 0 15px #2068df;
    }

    .skin-color-1 {
      width: 160px;
      height: 80px;
      border-radius: 10px;
      background-color: #ffdbb4;
    }

    .skin-color-2 {
      display: none;
      width: 160px;
      height: 80px;
      border-radius: 10px;
      background-color: #e2a17f;
    }

    .skin-color-3 {
      display: none;
      width: 160px;
      height: 80px;
      border-radius: 10px;
      background-color: #a5673f;
    }

还有 JS:

    function slider() {
      let slideIndex = 1,
          skinSlider = document.getElementsByClassName('skin')[0],
          skinSliderItem = document.getElementsByClassName('skin-color'),
          prev = skinSlider.querySelector('.prev'),
          next = skinSlider.querySelector('.next');

      showSlides(slideIndex);

      function showSlides(n) {
        if (n > skinSliderItem.length) {
          slideIndex = 1;
        }
        if (n < 1) {
          slideIndex = skinSliderItem.length;
        }

        for (let i = 0; i < skinSliderItem.length; i++) {
          skinSliderItem[i].style.display = 'none';
        }

        skinSliderItem[slideIndex - 1].style.display = 'block';

        function plusSlides(n) {
          showSlides(slideIndex += n);
        }

        prev.addEventListener('click', () => {
          plusSlides(-1);
          console.log(skinSliderItem.length);
        });

        next.addEventListener('click', () => {
          plusSlides(1);
          console.log(skinSliderItem.length);
        });
      }
    };

    slider();

Answer 1

每次单击时，都会向上一个/下一个 div 添加一个新的事件监听器，这意味着每次单击时都会触发该事件的两倍。

将 addEventListener 和 plusSlides 函数移到外部，如下所示:

  function slider() {
      let slideIndex = 1,
          skinSlider = document.getElementsByClassName('skin')[0],
          skinSliderItem = document.getElementsByClassName('skin-color'),
          prev = skinSlider.querySelector('.prev'),
          next = skinSlider.querySelector('.next');

          //... to here:

        function plusSlides(n) {
          showSlides(slideIndex += n);
        }

        prev.addEventListener('click', () => {
          plusSlides(-1);
          console.log(skinSliderItem.length);
        });

        next.addEventListener('click', () => {
          plusSlides(1);
          console.log(skinSliderItem.length);
        });

      showSlides(slideIndex);

      function showSlides(n) {
        if (n > skinSliderItem.length) {
          slideIndex = 1;
        }
        if (n < 1) {
          slideIndex = skinSliderItem.length;
        }

        for (let i = 0; i < skinSliderItem.length; i++) {
          skinSliderItem[i].style.display = 'none';
        }

        skinSliderItem[slideIndex - 1].style.display = 'block';

        //from here...
      }
    };

    slider();