Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Почему так работает setInterval? (https://javascript.ru/forum/misc/68943-pochemu-tak-rabotaet-setinterval.html)

skvo.kiril@yandex.ru 19.05.2017 11:01

Почему так работает 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. Все это наглядно видно в консоли

skvo.kiril@yandex.ru 19.05.2017 11:05

Та же ошибка
 
http://jsfiddle.net/esr0ssja/4/ Анолагично себе ведет если я пытаюсь вызвать функцию animate в самой func
и как надо http://jsfiddle.net/esr0ssja/6/

рони 19.05.2017 12:29

skvo.kiril@yandex.ru,
setInterval - не нужен и вреден в 99.9%, а в анимации тем более.
и чтобы анимировать стиль, надо анимировать стиль, а не весь тег целиком.
или setTimeout или что лучше requestAnimationFrame
и прочесть это https://learn.javascript.ru/js-animation

skvo.kiril@yandex.ru 24.05.2017 12:44

спасибо...


Часовой пояс GMT +3, время: 01:51.