CSS动画延迟的原因

我试图在一个长时间运行的JS函数中设置一个"更新"图像旋转。我正在使用JQuery添加一个类（"spinning"），我在CSS中定义了JQuery来触发动画——当它自己运行时，效果很好。然而，当我在addClass后面进行长时间运行的JS函数调用时，动画中会有延迟，即使该类是即时应用的。

有人能告诉我哪里出了问题吗；如何在长时间运行函数之前启动动画？

这个JSFiddle说明了这个问题：http://jsfiddle.net/gLas4k23/2/-旋转在"doSomething"完成之前开始，但在明显的延迟之后，如果不存在对doSometing的调用，则该延迟将不存在。

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');
 }
}