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

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

• setTimeout()  

• setInterval()

setTimeout() 炸弹定时器        

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

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

 <button>点击停止定时器</button>   //html部分
    // js部分
 <script>
     var btn = document.querySelector('button');
     // 开启定时器
     var timer = setTimeout(function() {
         console.log('爆炸了');
     }, 5000);
     // 给按钮注册单击事件
     btn.addEventListener('click', function() {
          // 停止定时器
          clearTimeout(timer);
     })
 </script>

setInterval() 闹钟定时器

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

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

//html部分
<div>
     <span class="hour">1</span>
     <span class="minute">2</span>
     <span class="second">3</span>
 </div>
 // js部分
 <script>
     // 1. 获取元素（时分秒盒子） 
     var hour = document.querySelector('.hour'); // 小时的黑色盒子
     var minute = document.querySelector('.minute'); // 分钟的黑色盒子
     var second = document.querySelector('.second'); // 秒数的黑色盒子
     var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

     countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 

     // 2. 开启定时器
     setInterval(countDown, 1000);
		
     function countDown() {
         var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
         var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
         var h = parseInt(times / 60 / 60 % 24); //时
         h = h < 10 ? '0' + h : h;
         hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
         var m = parseInt(times / 60 % 60); // 分
         m = m < 10 ? '0' + m : m;
         minute.innerHTML = m;
         var s = parseInt(times % 60); // 当前的秒
         s = s < 10 ? '0' + s : s;
         second.innerHTML = s;
     }
 </script>

 停止定时器 window.clearInterval(intervalId)

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

手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
		// 全局变量，定义剩下的秒数
        var time = 3; 
		// 注册单击事件
        btn.addEventListener('click', function() {
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function() {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
   </script>

 requestAnimationFrame

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

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

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

扫描二维码关注公众号，回复： 13211031 查看本文章

我们可以使用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)
}