Здравствуйте. Подскажите, пожалуйста ответы на следующие вопросы.
Первый: Почему в данном примере, если использовать переменную degrees не как глобальную, а как локальную в контексте функции, то код работать не будет?
Второй: Какой из вариантов, с точки зрения оформления и синтаксиса корректнее (setTimeout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#image {
width: 200px;
height: 200px;
background: #359FBC;
margin: 80px auto;
}
h2 {
width: 200px;
}
</style>
</head>
<body>
<div id="image"></div>
<h2 id="status"></h2>
<script src="main.js"></script>
</body>
</html>
var looper;
var degrees = 0;
function rotateAnimation(el, speed) {
// var degrees = 0;
var elem = document.getElementById(el);
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
// setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
setTimeout(function() {
rotateAnimation(el, speed);
}, 30);
degrees++;
if (degrees > 359) {
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
rotateAnimation("image", 30);