Rotating an HTML element using JavaScript and setTimeout to simulate a constantly moving object
I spent a bit of time trying to understand this particular bit of Javascript and why it seems so infuriating.
I currently have two functions. They are shown as follows.
function startUpProc(id)
{
var log = window.document.getElementById(id);
log.style.transform = "rotate(0deg)";
var i = 10;
while ( i <= 360)
{
setTimeout('changeRotate(' + id + ',' + i + ')', 100);
i = i + 10;
}
}
function changeRotate(item, val)
{
item.style.transform = "rotate(" + val + "deg)";
item.style.webkitTransform = "rotate(" + val + "deg)";
item.style.mozTransform = "rotate(" + val + "deg)";
//alert(item.style.transform);
}
A relatively simple bit of Javascript that rotates an HTML element, in this case it's an image, this code is called using the bodyLoad handler like this:
<body onLoad="startUpProc('logo');">
My intention is to make the image rotate 360 degrees, which is adjusted with my while loop.
Where my confusion is that, even though it only takes 3.6 seconds to complete, it doesn't even seem to work, and no error is thrown, so the warning is that I have put a function in an attempt to see what is going on.
The warning was triggered 36 times and visually I could see the image spinning on the page.
I found the following SO Q&A but to no avail, the answer is simply not applicable for the specific event I am trying to create as the image rotates no matter which browser I try to include the code in, the only difference is that it only rotates then when there is a warning or whatever to stop the flow of code ... Rotating the div element
Unfortunately for me all the other answers I find are similar to using JQuery, for the moment I would like to avoid and learn to develop professionally in JavaScript without using third party extensions and plugins.
source to share
The problem is that the loop will spin 36 times, and after 100ms, it will spin 36 times when i
set to "360".
Try something like this:
var STEP = 10;
function startUpProc(id)
{
var log = window.document.getElementById(id);
// initialized to 0 in changeRotate
makeCircle(log, 0);
}
function makeCircle(item, targetAngle) {
changeRotate(item, targetAngle);
if (targetAngle < 360) {
setTimeout(function (){
makeCircle(item, targetAngle + STEP);
}, 100);
}
}
This ensures that each spin starts after the last one completes.
source to share
Your code triggers 36 timeouts, which all fire at once, and eventually rotates the element 360 degrees, so you might not even notice the result.
You can either start a new timeout when the old stop:
function changeRotate(item, val)
{
item.style.transform = "rotate(" + val + "deg)";
item.style.webkitTransform = "rotate(" + val + "deg)";
item.style.mozTransform = "rotate(" + val + "deg)";
val += 10;
setTimeout(function () {
changeRotate(item, i);
}, 100);
}
changeRotate(document.getElementById('foo'), 0);
Or you can use setInterval
which will repeat the same action every given number of milliseconds http://www.w3schools.com/jsref/met_win_setinterval.asp
var val = 0;
function changeRotate(item)
{
item.style.transform = "rotate(" + val + "deg)";
item.style.webkitTransform = "rotate(" + val + "deg)";
item.style.mozTransform = "rotate(" + val + "deg)";
val += 10;
}
setInterval(function () {
changeRotate(document.getElementById('foo'), 0);
}, 100);
source to share