什么时候在jQuery中清除间隔？

Question

我制作了食物掉落游戏，所以黑色正方形从屏幕顶部掉落，玩家使用拼盘收集它们。我使用array执行此操作，因此每次创建新方块时，程序都会将其放在数组food[]中的某个位置。（所有这些都发生在move()函数中）

问题是，经过一段时间后，阵列中的方块太多而且计算机处理起来太多了。我可能需要在一段时间后清除两个间隔，但我不确定何时。解决这个问题的任何方法？该代码还会在游戏重新加载时清除两个时间间隔，并从food[]数组中抛弃旧方块。

下面有一个实例。

＆＃13;

＆＃13;

var main = function () {

    //Global variables
    var food = [];
    //Interval
    var interval;
	var interval2;

    //Radius size
    var size;

    var Xpos;

    var speed = 15;

    //Color
    var color;
	
	var score = 0;
	
	$('.btn').hover(function() {
		$('.btn').addClass('btn-hover');
	}, function() {
		$('.btn').removeClass('btn-hover');
	});
	$('.btn2').hover(function() {
		$('.btn2').addClass('btn-hover');
	}, function() {
		$('.btn2').removeClass('btn-hover');
	});

	$('.score').text("SCORE: " + score);
	
	var lives_left = 3;
    //Function that checks if two elements collide
    function collision($div1, $div2) {
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
        return true;
    }


    //Create a random circle
    var circleCreate = function () {

        if (interval) clearInterval(interval);

        food.push($('<div></div>'));
        var num = food.length - 1;
        size = 6;

        //1. Create a circle and append it to .container
        //2. Give it a random position
        //3. Color it
        //4. Give it a moving path

        food[num].appendTo('.food').addClass('circle').css('height', size + '%').css('width', size / 2 + '%');

        Xpos = Math.round(Math.random() * 95);
		if (Xpos <= 5) {
			Xpos += 5;    
		}
        food[num].css('left', Xpos + '%');

        //Choose the circle color
        var circleColor = function () {

            color = Math.random();

            if (color <= 0.1) {
                food[num].css('background-color', 'black'); //red    
            } else if (color <= 0.2) {
                food[num].css('background-color', 'black');   
            } else if (color <= 0.3) {
                food[num].css('background-color', 'black');   
            } else if (color <= 0.4) {
                food[num].css('background-color', 'black');    
            } else if (color <= 0.5) {
                food[num].css('background-color', 'black');    
            } else if (color <= 0.6) {
                food[num].css('background-color', 'black');    
            } else if (color <= 0.7) {
                food[num].css('background-color', 'black');    
            } else if (color <= 0.8) {
                food[num].css('background-color', 'black');    
            } else if (color <= 0.9) {
                food[num].css('background-color', 'black');   
            } else {
                food[num].css('background-color', 'black');    
            }
        }

	//Facts
	var fact = function() {

	var randomFact = Math.random();

	if (randomFact <= 0.05) {
		$('.fact').text("- Sladoled je porijeklom iz Kine");
	}
	else if(randomFact <= 0.1) { 
		$('.fact').text("- Sok od borovnice poboljsava memoriju.");
	}
	else if(randomFact <= 0.15) {
		$('.fact').text("- Hrani je potrebno sedam minuta da dode u zeludac iz usta."); 
	}
	else if(randomFact <= 0.2) {
		$('.fact').text("- Postoji oko 100.000 bakterija u jednoj litri pitke vode."); 
	}
	else if(randomFact <= 0.25) {
		$('.fact').text("- Lubenice mogu kostati do 70 eura u Japanu."); 
	}
	else if(randomFact <= 0.3) {
		$('.fact').text("- U sredstvima za ciscenje kuce i detrdgentima koji sadrze limun, ima vise limunovog soka od kupovne limunade."); 
	}
	else if(randomFact <= 0.35) {
		$('.fact').text("- U salici kave ima preko 1000 kemikalija."); 
	}
	else if(randomFact <= 0.4) {
		$('.fact').text("- Prosjecni Francuz pojede oko 500 puzeva godisnje."); 
	}
	else if(randomFact <= 0.45) {
		$('.fact').text("- Nakon sto se Popaj pojavio u Americi, prodaja spinata se podigla 33%.");
	}
	else if(randomFact <= 0.5) {
		$('.fact').text("-  Pravi biseri se tope u octu.");
	}
	else if(randomFact <= 0.55) {
		$('.fact').text("- U drevnoj Kini, ljudi su cinili samoubojstvo tako sto bi pojeli pola kile soli.");
	}
	else if(randomFact <= 0.6) {
		$('.fact').text("- Banane sadrze kemikaliju koja cini ljude sretnim.");
	}
	else if(randomFact <= 0.65) {
		$('.fact').text("- Jabuke pripadaju porodici ruza.");
	}
	else if(randomFact <= 0.7) {
		$('.fact').text("- Jabuke su ucinkovitije od kofeina pri jutarnjem razbudivanju. ");
	}
	else if(randomFact <= 0.75) { 
		$('.fact').text("- Kozje mlijeko koristi se cesce od kravljeg.");
	}
	else if(randomFact <= 0.8) {
		$('.fact').text("- Prvi proizvod oznacen bar-kodom bio je Wrigleyev paketic guma za zvakanje.");
	}
	else if(randomFact <= 0.85) {
		$('.fact').text("- Sendvic je dobio ime prema Johnu Montaguu, 4. Grofu od Sandwicha (18.st), covjeku koji ga je volio jesti tijekom kartanja. ");
	}
	else if(randomFact <= 0.9) {
		$('.fact').text("- Kinezi godisnje iskoriste oko 45 milijardi stapica za jelo.");
	}
	else if(randomFact <= 0.95) {
		$('.fact').text("- Kina je najveci proizvodac cesnjaka na svijetu, s otprilike 77% ukupne svjetske proizvodnje. ");
	}
	else if(randomFact <= 1) {
		$('.fact').text("- Jagode imaju vise vitamina C od narance.");
	}

	}
		fact();
        //Wall colliders
        //Collision function
        //Function that checks if two elements collide

        var move = function () {
            interval = setInterval(function () {
                for (var i = 0; i < food.length; ++i) {
                    var posTop = food[i].offset().top / $(window).height() * 100;
                    if (posTop < 100)  { 
						posTop += 1;
						if(collision($('.player'),food[i])) {
							score++;
							food[i].remove();
							$('.score').text("SCORE: " + score);
							break;
						}
						else if(collision($('.dead_line'),food[i])) {
							food[i].remove();
							lives_left--;
							$('.lives').children().last().remove();
							if(lives_left === 0) {
							$('.bodovi').text("Score: " + score);
								num = 0;
								i = 0;
								score = 0;
								food = [];
								lives_left = 3;
								clearInterval(interval);
								clearInterval(interval2);
								$('.food').children().remove();
								$('.container').hide();
								$('.end').show();
								break;
							}
							break;
						}
					}
                    food[i].css('top', posTop + '%');
                }
            }, speed);
        }

        //Color the circle
        circleColor();

        move();
    }
	
$('.btn').click(function() {

$('.score').text("SCORE: " + score);
$('<div>').appendTo('.lives').attr('id', 'life').addClass('prvi');
$('<div>').appendTo('.lives').attr('id', 'life').addClass('drugi');
$('<div>').appendTo('.lives').attr('id', 'life').addClass('treci');
$('.btn').hide();
$('.container').show();

	interval2 = setInterval(function() {
		$('.score').text("SCORE: " + score);
		circleCreate();
	}, 400);
});

$('.btn2').click(function() {
$('.end').hide();
$('.score').text("SCORE: " + score);
$('<div>').appendTo('.lives').attr('id', 'life').addClass('prvi');
$('<div>').appendTo('.lives').attr('id', 'life').addClass('drugi');
$('<div>').appendTo('.lives').attr('id', 'life').addClass('treci');
$('.btn').hide();
$('.container').show();

	interval2 = setInterval(function() {
		$('.score').text("SCORE: " + score);
		circleCreate();
	}, 400);
});

    //Player moves with the mouse    
    $('.container').mousemove(function (e) {

        $('.player').css('left', e.pageX + 15 + 'px');

    });

}

$(document).ready(main);

＆＃13;

body {
    font-family: Trebuchet MS;	
}
.bg {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	background-color: #EBEBEB;
}
.container {
    position: fixed;
    top: 0%; 
    left: 0%;
    height: 100%;
    width: 82%;
    background-color: transparent;
	display: none;
}

.player {
    top: 92%;
    position: inherit;
    height: 5%;
    width: 15%;
    background-color: black;
    z-index: 4;
}

.btn {
    position: absolute;
    top: 40%;
    left: 45%;
    height: 10%;
    width: 10%;
    text-align: center;
    background-color: #1D1D1D;
    cursor: pointer;
    color: white;
    font-size:20px;
    line-height: 40px;
	z-index: 4;
}
.circle {
	position: absolute;
	top: 5%;
	height: 10%;
 	width: 5%;
	z-index: 3;
	background-size: 100%;
	background-repeat: no-repeat;
}

.score {
    position: absolute;
    top: 15%;
    left: 5%;
    height: 10%;
    width: 20%;
    font-size: 25px;
	font-family:     
}

.score_line {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 0.1%;
    width: 100%;
}
.dead_line {
    position: absolute;
    top: 99%;
    left: 0%;
    height: 1%;
    width: 100%;     
}
#life {
    position: absolute;
    height: 8%;
    width: 8%;
	top: 5%;
	background-color: red;
}
.prvi {
	left: 5%;
}
.drugi {
	left: 15%;
}
.treci {
	left: 25%;
}

.start {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	background-color: transparent;
}


.game_over {
    position: absolute;
    top: 20%;
    left: 30%;
    height: 15%;
    width: 60%;
    background-color: transparent;
    z-index: 3;
	 font-family: "Lucida Console",Monaco, monospace;
    font-size: 50px;
    color: black;
	font-weight: bold;
}
.bodovi {
    position: absolute;
    top: 35%;
    left: 38%;
    height: 15%;
    width: 40%;
    background-color: transparent;
    z-index: 3;
	 font-family: Trebuchet MS;
    font-size: 25px;
    color: black;
}
.end {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	background-color: transparent;
	display: none;
}
.fact {
    position: absolute;
    top: 45%;
    left: 5%;
    height: 15%;
    width: 95%;
    background-color: transparent;
    z-index: 3;
	font-family: Trebuchet MS;
    font-size: 20px;
    color: black;
	text-align: center;
}
.btn2 {
    position: absolute;
    z-index: 5;
    top: 60%;
    left: 45%;
    height:10%;
    width:10%;
    text-align: center;
    background-color: #1D1D1D;
    cursor: pointer;
    color: white;
    font-size:20px;
    line-height: 40px;
}
.btn-hover {
	background-color: black;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
<div class="start">
	<div class="btn">PLAY</div>
</div>
	<div class="bg"></div>
    <div class="container">
        <div class="player"></div>
        <div class="food"></div>
        <div class="lives"></div>
        
        <div class="score"></div>
        <div class="dead_line"></div>
    </div>

<!--Kraj igre-->
<div class="end">
	<div class="game_over">GAME OVER</div>
	<div class="bodovi"></div>
	<!--Igraj ponovo-->
	<div class="btn2">PLAY</div>
	<div class="fact"></div>
</div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
  
</body>

＆＃13;

＆＃13;

＆＃13;