爲什麼CSS在我有後臺進程時會旋轉口吃？ IE和FF

Question

我有一個簡單的CSS代碼，它在點擊時旋轉圖像，如下圖所示。這是標準的微調代碼，當其點擊：我切換

CSS：

.rotate { 
    -webkit-animation-name: spinner; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spinner; 
    -moz-animation-duration: 1s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spinner; 
    -ms-animation-duration: 1s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear;  
} 

@-webkit-keyframes spinner 
{ 
    from{-webkit-transform:rotate(0deg);} 
    to{-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes spinner 
{ 
    from{-moz-transform:rotate(0deg);} 
    to{-moz-transform:rotate(360deg);} 
} 
@-ms-keyframes spinner 
{ 
    from{-ms-transform:rotate(0deg); 
    } 
    to{ 
     -ms-transform:rotate(360deg); 
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    } 
} 
@keyframes spinner { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); }  
} 

的CSS工作得很好，順利，直到它達到我的JS代碼，這部分內容。 IE或FF難以同時處理兩件事情嗎？我不明白爲什麼它適用於Chrome就好：

JS：

var datas = _.map(sourceData, function (item, index) { 
       return new sourceItem(item,index); 
      }); 

Answer 1

是，動畫和循環總是拉起了大量的資源。嘗試一個一個地執行它們。

延遲使用

setTimeout(function(){ 
    // code here 
},100); // milliseconds