Блог

В данный момент я пытаюсь создать слайд-шоу для изображений (при нажатии на стрелку появляется другое изображение, все изображения расположены в строке html). Я не использую метод прокрутки. Изображения движутся, но, похоже, я не могу остановить интервал. Я хотел спросить, как остановить интервал? Чего мне не хватает?

 const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");

let positionRight = 0;

function addPositionRight () {
    positionRight  = 1;
    imageDiv.style.right = `${positionRight}%`;
}

icons[1].onclick = () => {
    setInterval(addPositionRight, 10);
    if (positionRight === 100) {
        clearInterval(addPositionRight)
    }
} 

setInterval возвращает идентификатор, который позволяет очистить интервал

 let myInterval;

function addPositionRight () {
    positionRight  = 1;
    imageDiv.style.right = `${positionRight}%`;
    if (positionRight === 100) {
        clearInterval(myInterval);
    }
}

myInterval = setInterval(addPositionRight, 10);
 

setInterval Метод возвращает указатель на этот интервал, затем вы просто передаете его в clearInteral

 const interval = setInterval(() => {
    console.log('inside interval');
}, 500);

setTimeout(() => clearInterval(interval), 2000)
 

Вы должны использовать clearInterval следующий метод,

 const stopInterval = setInterval(addPositionRight, 10);

clearInterval(stopInterval) //<----- use it where you want to stop it.
 

дополнительная информация: https://www.w3schools.com/jsref/met_win_clearinterval.asp