Помогите остановить цикл
Я хочу что б по парному нажатию мой цикл перебора цветов спектра останавливался. Мне кажется, что бесконечные циклы это не хорошо для производительности.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<style type="text/css">
#field {
position: relative;
width: 400px;
height: 400px;
margin-left: 10%;
margin-top: 10%;
border: 5px solid black;
}
.block {
width: 100%;
height: 33.33%;
border: 1px solid black;
}
.block:nth-child(1) {
background-color: red;
}
.block:nth-child(2) {
background-color: green;
}
.block:nth-child(3) {
background-color: blue;
}
</style>
</head>
<body>
<div id="field">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<input id="buttonPush" type="button" value="Colorize">
<script type="text/javascript">
window.onload = function () {
console.log('Everything GOOD');
var $field = $('#field'),
$block = $('.block'),
$colorize = $('.colorize'),
len =$('#field >div').length,
button=$('#buttonPush');
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / 256;
var i = 0;
button.on('click', function(){
$block.toggleClass('colorize');
// console.log('button pushed');
if($('.block').hasClass('colorize')){
Rainbow();
setInterval(Rainbow, 50);
} else{ i=0;
$('.block').eq(0).css({backgroundColor: "red"});
$('.block').eq(1).css({backgroundColor: "green"});
$('.block').eq(2).css({backgroundColor: "blue"});
}
});
function Rainbow(){
if ( i < 255 ) {
var r = Math.floor(Math.sin(frequency * i + 2) * width + center);
var g =Math.floor( Math.sin(frequency * i) * width + center);
var b = Math.floor(Math.sin(frequency * i + 4) * width + center);
$('.colorize').eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});
$('.colorize').eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});
$('.colorize').eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});
// $block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});
// $block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});
// $block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});
i++
if (i==255) {
i=1
return i
}
console.log( "i=" + i);
}
}
}
</script>
</body>
</html>