javascript - 我在调用轮播代码时遇到问题，它会为其他条件保留变量

Question

我尝试了很多方法来阻止此错误，但似乎没有任何效果，这是我的 codepen 的链接：https ://codepen.io/T_manuel/pen/PoKMYVx

当页面加载时，我调用该函数，但是当我调整页面大小时，Javascript 似乎也使用以前的逻辑来执行新逻辑......

const mediaQuery_1 = '(max-width:601px)';

const mediaQueryList1 = window.matchMedia(mediaQuery_1);

/carousel parent div -- to dynamically load the carousel items

// define media queries

const mediaQuery_1 = '(max-width:601px)';

// add matchMedia

const mediaQueryList1 = window.matchMedia(mediaQuery_1);

if (mediaQueryList1.matches) {
  carouselFunc(); // dynamic loaded pictures
  LeftArrow.classList.add("displayNone");
  let indexOfImg = 0; //to be accessed for the carousel, index for first image
  let endofImg = 3; //carousel use, index for next image to be displayed
  otherCarouselLogic(indexOfImg, endofImg);
  if (carouselPics.length > 3) {
    for (i = 3; i < carouselPics.length; i++) {
      carouselPics[i].classList.add("displayNone");
    }
    RightArrow.classList.remove("displayNone");
  } else {
    RightArrow.classList.add("displayNone");
  }
}

else {

  carouselFunc(); //dynamic loaded Pictures
  LeftArrow.classList.add("displayNone");
  let IndexOfImg = 0; //to be accessed for the carousel, index for first image
  let EndOfImg = 4; //carousel use, index for next image to be displayed
  otherCarouselLogic(IndexOfImg, EndOfImg);
  if (carouselPics.length > 3) {
    for (i = 4; i < carouselPics.length; i++) {
      carouselPics[i].classList.add("displayNone");
    }
  }
  // not to display carousel arrows if pics can be showed at once
  if (carouselPics.length <= 4) {
    RightArrow.classList.add("displayNone");
  }
}

// add event Listener

mediaQueryList1.addEventListener("change", function carouselUx(event) {

  if(event.matches) {
    
    document.getElementById("carous").innerHTML = "";
    carouselFunc(); //contains dynamic loaded pictures
    LeftArrow.classList.add("displayNone");
    let indexOfImg = 0; //to be accessed for the carousel, index for first image
    let endofImg = 3; //carousel use, index for next image to be displayed
    otherCarouselLogic(indexOfImg, endofImg);
    if (carouselPics.length > 3) {
      for (i = 3; i < carouselPics.length; i++) {
        carouselPics[i].classList.add("displayNone");
      }
      RightArrow.classList.remove("displayNone");
    } else {
      RightArrow.classList.add("displayNone");
    }
  }
  
   else {

    document.getElementById("carous").innerHTML = "";
    carouselFunc();
    LeftArrow.classList.add("displayNone");
    let IndexOfImg = 0; //to be accessed for the carousel, index for first image
    let EndOfImg = 4; //carousel use, index for next image to be displayed
    otherCarouselLogic(IndexOfImg, EndOfImg);
    if (carouselPics.length > 3) {
      for (i = 4; i < carouselPics.length; i++) {
        carouselPics[i].classList.add("displayNone");
      }
    }
    // not to display carousel arrows if pics can be showed at once
    if (carouselPics.length <= 4) {
      RightArrow.classList.add("displayNone");
    }
  }
})

function otherCarouselLogic(cpF, newImg) {

  /* carousel code ends here */

  carouselBtn.forEach(function (btns) {
    btns.addEventListener("click", function (e) {
      clickedArrow = e.currentTarget.id;

      if (clickedArrow === "right") {
        console.log(newImg);
        carouselPics[cpF].classList.add("displayNone");
        carouselPics[newImg].classList.remove("displayNone");
        LeftArrow.classList.remove("displayNone");
        cpF += 1;
        newImg += 1;
      }

      if (clickedArrow === "left") {
        cpF -= 1;
        newImg -= 1;
        carouselPics[newImg].classList.add("displayNone");
        carouselPics[cpF].classList.remove("displayNone");
        RightArrow.classList.remove("displayNone");
        console.log(newImg);
      }

      // ux purpose, when we get to the last pics in the carousel, the right arrow is hidden
      diffR = carouselPics.length - newImg;

      // diffL
      if (diffR === 0) {
        RightArrow.classList.add("displayNone");
      }

      if (cpF === 0) {
        LeftArrow.classList.add("displayNone");
      }
    });
  });

  /* carousel code ends here */
}

加载时，

newImg 设置为 4，似乎一切正常

调整大小后，根据逻辑将其设置为 3 或 4，但不是单独增加该值，而是为负载和调整大小提供值。