Почему так работает setInterval? JS [требует правки]

259

20 мая 2017, 16:49

Если раскоментировать две строки в JS, setInterval начинает себя вести странным образом, чем это связанно. Думаю все понятно что я хочу реализовать?

var timerfps; 
var timersec; 
var fps = 33.33; 
var ipr = 0; 
var timer = 3000; 
var valEl = 0; 
var circle_hover = document.getElementById('circle_hover'); 
		animate() 
	function animate(){ 
	        circle_hover.innerHTML = '<svg width="153" height="153"><circle transform="rotate(-90)" r="65" cx="-80" cy="80" /><circle transform="rotate(-90)" style="stroke-dasharray:'+valEl+'px 408px;" r="65" cx="-80" cy="80" /></svg>'; 
	        		 
	} 
 
	function func(){ 
		ipr += 1; 
		valEl = ipr*408/100; 
		console.log(ipr); 
	} 
	circle_hover.onmouseover = function() { 
	    timerfps = setInterval(func, 1000/fps); 
		/*timeramimat = setInterval(animate, 1000);*/ 
		timersec = setTimeout(function() {clearInterval(timerfps);}, timer); 
	}; 
 
	circle_hover.onmouseout = function() { 
		ipr = 0; 
		clearTimeout(timersec); 
		clearInterval(timerfps); 
		/*clearInterval(timerfps);*/ 
	};

#circle_hover{ 
	position: relative; 
	width: 160px; 
	height: 160px; 
} 
circle { 
  fill: rgba(0,0,0,0); 
  stroke: #eee; 
  stroke-width: 15; 
  stroke-dasharray: 408px 408px; 
} 
circle:nth-child(2n) { 
  fill: rgba(0,0,0,0); 
  stroke: #30bae7; 
  stroke-width: 15; 
}

<div id="circle_hover"></div>

Я хочу понять почему данный отрезок кода https://jsfiddle.net/esr0ssja/2/ работает setInterval как надо, а если раскоментить две строки https://jsfiddle.net/esr0ssja/3/ то сам setInteval начинает вести себя не заданный промежуток времени, и не отрабатывает setTimeout, который должен прерывать setInteval т.е. очищать celarInteval.