#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. Все это наглядно видно в консоли
