setInterval을 사용하여 자동 실행되는 javascript 슬라이드 쇼를 중지하십시오. - 시네마

Question

매우 좋고 가볍기 때문에 슬라이드 쇼를 사용 중입니다.

사용자가 마우스를 가리키면 슬라이드 쇼를 시작하고 떠나면 중지합니다.

가이드 문서에 따라 setInterval()을 사용하여 재생 비트가 작동하지만 슬라이드 쇼를 중지 할 수 없습니다. 나는 그 간격을 없애려고 노력하고 있지만 그것은 효과가없는 것 같습니다.

여기 만지작 내 전체 코드를

const mySiema = new Siema({ 
    duration: 250, 
    loop: true, // note: this just gets the slideshow to return to the beginning 
}); 

const container = document.querySelector('.siema'); 

var timer, intervalInSec = 1000; 

container.addEventListener('mouseenter',() => setInterval(() => mySiema.next(), intervalInSec)); 

container.addEventListener('mouseleave', clearInterval(timer)); 

및 heres a codepen을합니다.

Answer 1

setInterval() 메소드의 출력에 timer를 지정해야합니다.

그것은 (setInterval을)은 고유의 간격을 식별하는 간격 ID를 반환, 그래서 당신은 또한 마우스 휴가 이벤트에 익명 함수를 호출해야 할 사항 clearInterval()

를 호출하여 나중에 제거 할 수 있습니다 clearInterval()을 제대로 호출해야합니다. 예 :

container.addEventListener('mouseenter',() => timer = setInterval(() => mySiema.next(), intervalInSec)); 

container.addEventListener('mouseleave',() => clearInterval(timer));