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>