setTimeout、setInterval 和 requestAnimationFrame 之间的区别

setTimeout和setInterval的区别：
setTimeout()是延时器，setInterval()是定时器，setTimeout()在执行的时，是在载入后延迟指定时间后,去执行一次表达式,次数是一次，而setInterval()则不一样,它从载入后,每隔指定的时间就执行一次表达式

setTimeout()
setTimeout()用于延时执行参数指定的代码，如果在指定的延迟时间之前，想取消这个执行，可以用clearTimeout(timerId) timerId 是 setTimeout 时返回的；
语法：
var timerId = setTimeout(func|code, delay)
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。

    <button onclick="fun()">点我</button>
    <button onclick="myStopFunction()">阻止弹出</button>

 var timerId;

  function fun() {
            timerId = setTimeout(function () {
                alert("Hello")
            }, 3000);
  }

 function myStopFunction() {
            clearTimeout(timerId);
 }　

setInterval()

setInterval()用于每隔一段时间执行指定的代码，永无停歇，想清除它，可以使用 clearInterval(intervalId)，这样从调用 clearInterval intervalId 是 setInterval 时返回的；
语法：
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。

    <p>显示时间：<span id="date"></span></p>
    <button onclick="clearTime()">停止时间</button>

　　

var mTime = setInterval(function () {
            oTime()
        }, 1000);

        function oTime() {
            var date = new Date();
            var time = date.toLocaleTimeString();
            document.getElementById('date').innerHTML = time;
        }

        function clearTime() {
            clearInterval(mTime);
        }

　　

requestAnimationFrame(code)

requestAnimationFrame(code)，一般用于动画，与 setTimeout 方法类似，区别是 setTimeout 是用户指定的，而 requestAnimationFrame 是浏览器刷新频率决定的，一般遵循 W3C 标准，它在浏览器每次刷新页面之前执行。
语法：
window.requestAnimationFrame(callback);

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

注：　IE9-浏览器不支持该方法

<div style="border:1px solid #ddd;width: 500px;margin: 50px 0 10px;">
        <div id="box">0%</div>
    </div>
    <button id="btn">点击</button>

　　

var timer;
        btn.onclick = function () {
            box.style.width = '0';
            timer = requestAnimationFrame(function fn() {
                if (parseInt(box.style.width) < 500) {
                    box.style.width = parseInt(box.style.width) + 5 + 'px';
                    box.innerHTML = parseInt(box.style.width) / 5 + '%';
                    timer = requestAnimationFrame(fn);
                } else {
                    cancelAnimationFrame(timer);
                }
            })
        }