Javascript |如何停止网站上正在运行的功能

Question

所以，我有一个脚本，允许访问我的网站的用户像雨功能一样激活。但我希望他们能够将其关闭？问题是我不知道如何做到这一点，我尝试了很多不同的事情，比如中断、返回、一些超时的事情，但没有任何结果，所以我转向你们聪明的人并且比我更了解这一点:)

这是脚本，我通过使用 onclick 事件按下按钮来激活脚本。

var amountOfDrops = 150; 
var started = false;
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);}
// function to generate drops
function createRain() {
if (started ===  false){

    for( i=1;i<amountOfDrops;i++) {
    var dropLeft = randRange(0,2400);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }
                            console.log("Start");
                            console.log(started);
                            started = !started; //flips the bool to stop
}else{
                                    console.log("Shut down");
                            console.log(started);
                            started = !started; //flips the bool to start
                            return false;
}}

我在互联网上搜索过，但找不到任何相关信息，因此非常感谢您的帮助。

编辑(1)

那么，让我来填补一些空白。

这是我的 CSS:

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
                  color: #5cb1d1;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}

这就是我在 html 代码中的调用方式:

<script type="text/javascript" src="scripts/Rain.js"></script>
<button onclick="createRain()">Start Rain</button>

Answer 1

我认为我们可以使用 setInterval() 来解决这个问题。它对我有用，只需检查一下即可。

var amountOfDrops = 150; 
var started = false;
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);}
// function to generate drops
function createRain(started) {
if (started ===  false){

    for( i=1;i<amountOfDrops;i++) {
    var dropLeft = randRange(0,2400);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }
                            
}else{
                                   
                            
                            started = !started; //flips the bool to start
                            return false;
}}


$(document).on("click",".start",function(){
	started = false;
	setInterval(function(){
		createRain(started)
	},200)
})
$(document).on("click",".end",function(){
	started = true;
	setInterval(function(){
		createRain(started)
	},200)
	$(".drop").remove()
})

body{
			background-color: #000000;
			width: 100%;
			overflow: hidden;
		}
		.btn{
			border: 1px solid #ffffff;
			color: #ffffff;
			background-color: transparent;
			margin: 20px auto;
      padding:5px 20px;
		}
		.btn:hover{
			color: #eeeeee;
		}
		.drop{
			  background-color: #000;
			  width: 1px;
			  height: 3px;
			  background-color: #ffffff;
			  position: relative;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
		<button class="btn end">End</button>
		<button class="btn start">Start</button>
	</div>
	<div class="rain">
		
	</div>