javascript - 当元素到达屏幕底部时，如何停止setInterval函数？

我想要的是当第一个（.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（）不是函数”。

最佳答案

您可以使用clearInterval()功能。
例如，在这种情况下。
您将创建一个变量

var intervalId;

然后在muoviti()函数中，将为上述变量分配setInterval引用。

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

然后，一旦完成，就像在下面的if条件中那样：

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