setTimeout与setInterval性能比较

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

谈到动画，就避不开setTimeout与setInterval，都能实现动画效果，但对我来说，只有需要手动控制帧的速率、频率时，我才会优先选择setTimeout，因为我知道，论性能，setTimeout略逊于setInterval。

造成性能差异的原因，主要有两点：
1. setTimemout迭代式方法的调用方式，压栈、出栈都不是轻量级的任务；
2. setTimeout自身消耗了部分性能；

为了验证自己的想法，特意用Chrome时间线工具进行了监测：
从下图可以看出，setInterval只执行一次，并且定时器的ID始终不变，从执行堆栈看，后续的所有任务都全由调用的函数(move)承担，所以自身消耗的时间较短，其他任务消耗的时间较多，21us VS 610us。
setTimeout与setInterval性能比较
从setTimeout的时间线可以看出，setTimeout需要执行多次，并且每次执行，定时器的执行ID都会生成新的ID，从执行堆栈看，setTimeout的相关指令还会执行两次，所以自身消耗的时间更多，见下图。

测试代码

var item = $('#imgHy'),    count = 10;function move() {    item.css({        "margin-top" : 0 - count    })    if(count < 500) {        count = count + 10;        //  启用setInterval时，注销此代码        setTimeout(move, 10)    } else {        //  启用setTimeout时，注销此代码        //clearInterval(timer)    }}//  启用setInterval时，注销此代码setTimeout(move, 10)//  启用setTimeout时，注销此代码//var timer = setInterval(move, 10)

浏览人工智能教程

造成性能差异的原因，主要有两点：
1. setTimemout迭代式方法的调用方式，压栈、出栈都不是轻量级的任务；
2. setTimeout自身消耗了部分性能；

测试代码

var item = $('#imgHy'),    count = 10;function move() {    item.css({        "margin-top" : 0 - count    })    if(count < 500) {        count = count + 10;        //  启用setInterval时，注销此代码        setTimeout(move, 10)    } else {        //  启用setTimeout时，注销此代码        //clearInterval(timer)    }}//  启用setInterval时，注销此代码setTimeout(move, 10)//  启用setTimeout时，注销此代码//var timer = setInterval(move, 10)