setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑

使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：setTimeout, setInterval 和 requestAnimationFrame ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。

基本用法与区别

---

• setTimeout(code, millseconds) 用于延时执行参数指定的代码，如果在指定的延迟时间之前，你想取消这个执行，那么直接用clearTimeout(timeoutId)来清除任务，timeoutID 是 setTimeout 时返回的；
• setInterval(code, millseconds)用于每隔一段时间执行指定的代码，永无停歇，除非你反悔了，想清除它，可以使用 clearInterval(intervalId)，这样从调用 clearInterval 开始，就不会在有重复执行的任务，intervalId 是 setInterval 时返回的；
• requestAnimationFrame(code)，一般用于动画，与 setTimeout 方法类似，区别是 setTimeout 是用户指定的，而 requestAnimationFrame 是浏览器刷新频率决定的，一般遵循 W3C 标准，它在浏览器每次刷新页面之前执行。

省省劲儿，setTimeout 不能让你的程序暂停

---

这是一个误区，不要以为设置 setTimeout 会让你的程序停下来，它只会让它包裹的代码延迟指定的时间执行，在延迟的时间内，后面的代码还是会执行的！举个例子，你猜结果是啥？

var someVar = 'init-value';
setTimeout(function () {
   
    console.log('The first output at ' + (new Date()).getSeconds() + '-th second content : ' + someVar);
}, 2000);
console.log('The second ou