定时器--setTimeout()、setInterval()、requestAnimationFrame()

一、属性介绍和使用

setTimeout() 一次性的定时器 (要做的事情–函数, 规定的时间–单位为毫秒，1秒 = 1000毫秒，传的参数–可多个，逗号隔开)

setInterval() 永久性的定时器 (要做的事情–函数, 规定的时间–单位为毫秒，1秒 = 1000毫秒，传的参数–可多个，逗号隔开)。 浏览器对于我们设置的毫秒数可能会有误差，一般浏览器刷新速度是60帧每秒，所以可以用 1000/60。

requestAnimationFrame() 一次性定时器 像动画一样流畅，其刷新频率与浏览器的刷新频率相同，一般是60帧每秒，且不会进行重绘或回流

		setTimeout(function (a) {
            console.log("入侵阿里")
            console.log(a)
        },1000,"不敢不敢")
        // setInterval 只要不清除，就会一直执行
        setInterval(function () {
            console.log("投靠华为")
        },500)  
        requestAnimationFrame( function (){
            console.log(2)
        })  

二、清除定时器

clearTimeout()
clearInterval()
cancelAnimationFrame()

当我们打印定时器函数时，我们会发现：不论是什么定时器，依照解析的顺序，给了他们一个编码，从一开始。所以在清除定时器前，我们需要一个变量来获得定时器函数的返回值来定位这个定时器。

   console.log(setTimeout(function () {
            console.log("入侵阿里")
        },1000))                    // 1   
        console.log(setInterval(function () {
            console.log("投靠华为")
        },500))                     // 2
        console.log(requestAnimationFrame( function (){
            console.log("卧底腾讯")
        }))                         // 3

        var a = setInterval(function () {
            console.log("投靠华为")
        },500)
        // 此处设置为点击一下清除定时器
        document.onclick = function (){
            clearInterval(a)
        }

三、存在的现象和原因

        // 此处会出现一个问题，就是在我们不论定时器的时间设置成什么，其中执行的函数都是在普通打印之后，原因就是：其执行的异步操作，一个线程去操作定时器，一个线程去操作普通打印。执行一个原则就是同步先行，先执行完一个再执行另一个
        setTimeout(() => {
            console.log("sxjx")
        }, 0);
        console.log("ajah")
        console.log("ajah")
        console.log("ajah")
        console.log("ajah")

setInterval设置的时间会有误差，所以在执行时，会产生事件堆积，导致堵塞.

        // 使用setTimeout来达到setInterval的效果
        function yearning(){
            setTimeout(function(){
                console.log("以上是向往")
                yearning()   //自己执行自己，达到setInterval的效果
            },1000)
        }
        yearning()

requestAnimationFrame也可以使用这种方式