setTimeout與setInterval性能比較

談到動畫，就避不開setTimeout與setInterval，都能實作動畫效果，但對我來說，隻有需要手動控制幀的速率、頻率時，我才會優先選擇setTimeout，因為我知道，論性能，setTimeout略遜于setInterval。

造成性能差異的原因，主要有兩點：

1. setTimemout疊代式方法的調用方式，壓棧、出棧都不是輕量級的任務；

2. setTimeout自身消耗了部分性能；

為了驗證自己的想法，特意用Chrome時間線工具進行了監測：

從下圖可以看出，setInterval隻執行一次，并且定時器的ID始終不變，從執行堆棧看，後續的所有任務都全由調用的函數(move)承擔，是以自身消耗的時間較短，其他任務消耗的時間較多，21us VS 610us。

從setTimeout的時間線可以看出，setTimeout需要執行多次，并且每次執行，定時器的執行ID都會生成新的ID，從執行堆棧看，setTimeout的相關指令還會執行兩次，是以自身消耗的時間更多，見下圖。

測試代碼

var item = $('#imgHy'),
    count = ;
function move() {
    item.css({
        "margin-top" :  - count
    })
    if(count < ) {
        count = count + ;
        //  啟用setInterval時，登出此代碼
        setTimeout(move, )
    } else {
        //  啟用setTimeout時，登出此代碼
        //clearInterval(timer)
    }
}
//  啟用setInterval時，登出此代碼
setTimeout(move, )
//  啟用setTimeout時，登出此代碼
//var timer = setInterval(move, 10)