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的，然后有一个一个的setTimeout clearInterval。只是一个想法，这可能在功能之内或之外。另外，我非常确定JavaScript不会执行console.log()并翻转布尔直到for语句完成。所以最好的方法是setInterval然后有一个clearInterval，无论是setTimeout还是只需点击一下按钮。

Answer 2

我有同样的问题， 你可以尝试将计时器添加到您的功能 ，你可以使用：

$('#someElement').click(function(){ 
    // Clear the timeout 
    clearTimeout(timer); 
}); 

Answer 3

我认为我们可以解决使用的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(){ 
 
\t started = false; 
 
\t setInterval(function(){ 
 
\t \t createRain(started) 
 
\t },200) 
 
}) 
 
$(document).on("click",".end",function(){ 
 
\t started = true; 
 
\t setInterval(function(){ 
 
\t \t createRain(started) 
 
\t },200) 
 
\t $(".drop").remove() 
 
})

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

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