Почему так работает setInterval?
#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. Все это наглядно видно в консоли |
Та же ошибка
http://jsfiddle.net/esr0ssja/4/ Анолагично себе ведет если я пытаюсь вызвать функцию animate в самой func
и как надо http://jsfiddle.net/esr0ssja/6/ |
skvo.kiril@yandex.ru,
setInterval - не нужен и вреден в 99.9%, а в анимации тем более. и чтобы анимировать стиль, надо анимировать стиль, а не весь тег целиком. или setTimeout или что лучше requestAnimationFrame и прочесть это https://learn.javascript.ru/js-animation |
спасибо...
|
Часовой пояс GMT +3, время: 12:48. |