[skvo.kiril@yandex.ru]

#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>

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);
   /* animate()*/
	}
	circle_hover.onmouseover = function() {
	    timerfps = setInterval(func, 1000/fps);
		timersec = setTimeout(function() {clearInterval(timerfps);}, timer);
	};

	circle_hover.onmouseout = function() {
		ipr = 0;
		clearTimeout(timersec);
		clearInterval(timerfps);
	};

onmouseover на единственом обекты в HTML. Который запускает setInterval, тот вызывает функцию func, с указанным промежутком времени, и onmouseout который очищает setInterval, если раскоментить вызов финкции animate тот что закоментирован, начинается не привальное выполнение setInterval.

Тут то же самое но функцию animate() вызываем через setInterval
jsfiddle.net/esr0ssja/2 работает setInterval как надо, а если раскоментить две строки jsfiddle.net/esr0ssja/3 то сам setInteval начинает вести себя не заданный промежуток времени, и не отрабатывает setTimeout, который должен прерывать setInteval т.е. очищать celarInteval. Все это наглядно видно в консоли