Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a lengthy JS function, there seems to be a delay in the animation starting, even though the class is applied immediately.
I need help identifying what I'm doing wrong and how to ensure the animation begins before the long-running function is executed.
You can see the issue in this JSFiddle: http://jsfiddle.net/gLas4k23/2/. The spinning starts before "doSomething" finishes, but there's a noticeable delay which is not present if the "doSomething" call is removed.
html:
<div id='updateIcon' class='update'></div>
css:
.update {
width: 40px;
height: 40px;
background: url("http://s24.postimg.org/4psxulnkh/update_light.png") no-repeat;
background-size: 40px;
cursor: pointer;
}
.update.spinning {
-webkit-animation: spinner 1s infinite linear;
}
@-webkit-keyframes spinner {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
JS:
$('#updateIcon').on('click', function(e){
console.log('i have been clicked');
$('#updateIcon').addClass('spinning');
doSomething();
})
function doSomething(){
console.log('doing something')
for(var i=0;i<20000;i++){
console.log('waiting');
}
}