javascript - 如何在 JavaScript 中将“keydown”事件处理程序与“IntersectionObserver”一起使用？

Question

我在 JavaScript 中配置一个滑块。同样，我编写了以下代码。 slides是所有 4 张照片的 NodeList。 sliderBtnLeft是左箭头 sliderBtnRight是右箭头

有一个goToSlide(slide)函数用于通过调整 transformX 来显示特定的幻灯片。

有 2 个函数nextSlideFn()，prevSlideFn()当按下相应的按钮时会调用它们。

当我使用按钮时，代码工作正常。当我使用'keydown' eventListener 时，该代码也可以正常工作。

当我尝试使用'keydown' eventListener 时出现问题。与路口观察者。

第一次进入视口时它工作正常。稍后，如果我向上滚动并再次向下滚动，按下 ArrowKey 后的函数会被调用 3 次。

例如。如果我在上下滚动后按 ArrowRight，nextSlideFn()会被调用 3 次。每次我上下滚动时，它被调用的次数都会增加 2。

一次上下滚动：nextSlideFn()被调用 3 次 两次上下滚动：nextSlideFn()被调用 5 次 三次上下滚动：nextSlideFn()被调用 7 次等等......

ArrowLeft 也一样。（我通过将其记录到控制台来检查它）

sliderFunction()观察者功能和document.addEventListener('keydown',...)一起使用时存在一些问题。
可能是什么原因

//代码片段

    const slides = document.querySelectorAll('.slide');
    const slider = document.querySelector('.slider');
    const sliderBtnLeft = document.querySelector('.slider__btn--left');
    const sliderBtnRight = document.querySelector('.slider__btn--right');
    
    let currentSlide = 0;
          
    
    const goToSlide = function(slide){
      slides.forEach((s, index) => {
        s.style.transform = `translateX(${100 * (index - slide)}%)`;
      });
    }
    
    goToSlide(0);
    
    const nextSlideFn = function(){
      (currentSlide === slides.length - 1) ? currentSlide = 0 : currentSlide++;
      console.log('Right pressed');
      goToSlide(currentSlide);
    };
    
    const prevSlideFn = function(){
      (currentSlide === 0) ? currentSlide = slides.length - 1 : currentSlide --;
      console.log('Left pressed');
      goToSlide(currentSlide);
    };
    
    sliderBtnRight.addEventListener('click', nextSlideFn);
    sliderBtnLeft.addEventListener('click', prevSlideFn);
    
    const slideObject = {
      root: null,
      threshold: 0,
    }
    
    const sliderFunction = function(entries,observer){
      const entry = entries[0];
      console.log(entry.target);
      
      document.addEventListener('keydown', function(e){
    
        if(e.key === 'ArrowRight'){
          nextSlideFn();
        }
        if(e.key === 'ArrowLeft'){
           prevSlideFn();
        }
       }); 
   
    };
    
    const slideObserver = new IntersectionObserver(sliderFunction, slideObject);

    slideObserver.observe(slider);

标签： javascriptslideraddeventlistenerkeydownintersection-observer