How can i stop setInterval function when my element reach the bottom of the screen?

Question

What I want is when the first (.goccia) element reach the bottom of the screen the set interval function stop.

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);

I tried to create a variable like this:

gocciaTop = goccia.getBoundingClientRect().top

and then do an 'if' like this:

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

But he gave me an error that say that 'getBoundingClientRect() is not a function'.

`goccia` is an array of elements, not an element. – Roberto Zvjerković Feb 26 '20 at 09:05 — Roberto Zvjerković, Feb 26 '20 at 09:05

score 1 · Answer 1 · answered Feb 26 '20 at 09:08

1

you can use clearInterval() function. Forexample in you case. you will create a variable

var intervalId;

and then in you muoviti() function you will assign you setInterval reference to the above variable.

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

And then once you are done, like in the following if condition do this:

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

answered Feb 26 '20 at 09:08

noman tufail

341
2
8

`clearInterval()` is why it exists. Up voting this. Don't know about the `window.innerHeight()` as applies to OP but `clearInterval()` correct way to cancel an interval timer in javascript. Provided you assigned the `setInterval()` a result variable in *scope*. – GetSet Feb 26 '20 at 09:09

score 0 · Answer 2 · answered Feb 26 '20 at 09:23

if condition and the variable gocciaTop should be inside the for loop.

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);

How can i stop setInterval function when my element reach the bottom of the screen?

2 Answers2