Нужно ли очищать setInterval если он находится в setTimeout который очистил? И если нужно, то как?

В принципе вся суть вопроса в самом вопросе, вот пример кода:

const framesImg = () => {

        timerOne = setTimeout(() => {
            productListItemTextProgressGradOne.style.animation = 'product_progress linear 25s infinite'
            itemNum5.classList.remove('active');
            itemNum1.classList.add('active');
            productImg5.classList.remove('active');
            productImg1.classList.add('active');
            
            intervalOne = setInterval(() => {
                productListItemTextProgressGradOne.style.animation = 'product_progress linear 25s infinite'
                itemNum5.classList.remove('active');
                itemNum1.classList.add('active');
                productImg5.classList.remove('active');
                productImg1.classList.add('active');
            }, 25000);
            
        }, 5000); 
        
    }

    framesImg();


    itemNum.forEach(elem => {
        elem.addEventListener('mouseover', (e) => {
           clearTimeout(timerOne);
        });
    });


Ответы (1 шт):

Автор решения: Grundy

setTimeout и setInterval никак не связаны между собой, поэтому, для остановки интервала нужно его остановить с помощью метода clearInterval.

При этом, очевидно, что интервал не запустится, если событие mouseover произойдет раньше чем выполнится callback setTimeout. В этом случае, дополнительно вызывать clearInterval не надо.

Но, так как clearInterval не бросает исключения, если пришел некорректный параметр можно просто всегда вызывать его:

clearTimeout(timerOne);
clearInterval(intervalOne);
→ Ссылка