JS定时器跟清除定时器 , requestAnimationFrame

window 对象给我们提供了 2 个非常好用的方法-定时器。

• setTimeout()  

• setInterval()

setTimeout() 炸弹定时器        

 window.setTimeout(调用函数 , [延迟毫秒数])

setTimeout这个调用函数我们也称之为回调函数callback

 点击停止定时器   //html部分
    // js部分
 

setInterval() 闹钟定时器

 window.setInterval(回调函数,[间隔的毫秒数])

setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

//html部分

     1
     2
     3
 
 // js部分
 

 停止定时器 window.clearInterval(intervalId)

window可以省略 里面的参数就是定时器的标识符

手机号码：  发送
    

 requestAnimationFrame

 requestAnimationFrame帧 页面每一帧调用一次 , 没有固定的时间 , 速度根据浏览器的性能来定的 , 比setTimeout和setInterval更好 , requestAnimationFrame大致每1000ms/60(16.6ms)执行

js是异步执行代码的 , 所以在执行过程中如果遇到消耗性能的代码就会出现定时器不准确的情况

所以我们可以使用requestAnimationFrame来执行某些需要异步执行的代码

我们可以使用requestAnimationFrame封装一个定时器

let mySetInterval = (callback , userInterval ) => {
    const Time = Date.now;
    //获取当前时间戳
    let startTime = Time();
    //开始事件戳
    let currentTime
    //创建一个回调函数
    let myLoop = ()=> {
        currentTime = Time();
        let index = window.requestAnimationFrame(myLoop);
        //判断当前时间
        if( currentTime - startTime >= userInterval){
            startTime = currentTime = Time();
            //调用callback
            callback.call(null,index);
        }
    }
    return window.requestAnimationFrame(myLoop)
}