javascript - 当我的元素到达屏幕底部时，如何停止 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”:

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')
}