Как я могу остановить функцию setInterval, когда мой элемент достигает нижней части экрана?

Question

То, что я хочу, - это когда первый (.goccia) элемент достигает нижней части экрана, установка заданного интервала прекращается.

function spostaGocce(){
var goccia = document.querySelectorAll('.goccia');
for(i = 0; i < goccia.length; i++){ 
goccia[i].style.top = parseInt(goccia[i].style.top ||0) + Math.round(Math.random() * 2) + 1 
+ 'px';
}
}
function muoviti(){
setInterval(spostaGocce, 30);
}
document.querySelector('button').addEventListener('click', muoviti);

Я пытался создать переменную, подобную этой:

gocciaTop = goccia.getBoundingClientRect().top

, а затем выполните «если», как это:

if(gocciaTop == window.innerHeight){
document.write('done')
}

Но он дал мне ошибку, в которой говорится, что «getBoundingClientRect () не является функцией».

Answer 1

Вы можете использовать функцию clearInterval(). Например в твоем случае. вы создадите переменную

var intervalId;

и затем в вашей функции muoviti() вы назначите setInterval ссылку на указанную выше переменную.

function muoviti(){
  intervalId = setInterval(spostaGocce, 30);
}

И затем, как только вы закончите , как в следующем if состоянии сделать это:

if(gocciaTop == window.innerHeight){
  clearInterval(intervalId);
  document.write('done')
}

Answer 2

если условие и переменная gocciaTop должны быть внутри для l oop.

function spostaGocce(){
    var goccia = document.querySelectorAll('.goccia');
    for(i = 0; i < goccia.length; i++){ 
        goccia[i].style.top = parseInt(goccia[i].style.top ||0) + Math.round(Math.random() * 2) + 1 
        + 'px';
        var gocciaTop = goccia[i].getBoundingClientRect().top;

        if(gocciaTop == window.innerHeight){
         clearInterval(Int);
        }
    }
}
var Int;

function muoviti(){
    Int = setInterval(spostaGocce, 30);
}

document.querySelector('button').addEventListener('click', muoviti);