js内置对象---计时器对象

一、计时器对象简介

• 计时器对象分类
• 计时器对象分为一次性计时器，循环计时器，帧计时器（跟电脑的刷新频率有关）

二、一次性计时器

• 计时器的参数有string||function delay ms
• ms—延迟多少毫秒后执行

1. 一次性计时器的写法

• 写法1

   window.setTimeout(function(){
       console.log("常规代码");
   },1000)    

• 写法2

   //可以不写前缀window
   setTimeout(function(){
       console.log("常规代码");
   },1000)

• 写法3

   //函数的提前声明
   setTimeout(loop,2000);
   function loop(){
       console.log("执行");
   }

• 写法4

   function loop(){
       console.log("执行");
   }
   //字符串形式
   setTimeout("loop()",2000);

2. 清除计时器

• 使用变量接收计时器对象
• 返回值是数值

   var timer=setTimeout(function(){
       console.log("执行");
   },1000);
   console.log(timer);//1
   //清除计时器
   clearTimeout(timer);

三、循环计时器

• 和一次性计时器一致，只不过是循环执行。

1. 一次性计时器的写法

• 写法1

   setInterval(function(){
       console.log("执行");
   },1000)

• 写法2

   setInterval(loop,1000);
   function loop(){
       console.log("执行");
   }
   setInterval("loop()",1000);

2. 清除计时器

• 使用变量接收计时器对象
• 返回值是数值

   var count=0;
   var timer;
   timer=setInterval(function(){
       count++;
       console.log(count);
       if(count>9)
       {
           console.log(timer);//1
           clearInterval(timer);
       }
   },1000)

四、帧计时器

• 根据屏幕的刷新频率执行的计时器，不需要设置时间。
• 回调函数执行次数通常是每秒60次。

   var count=0;
   loop();
   function loop(){
       count++;
       console.log(count);
       window.requestAnimationFrame(loop);
   }

1. 设置兼容性

   //设置兼容性
   var requestFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame||function(callback){
       setTimeout(callback,1000/60);
   };
   var count=0;
   loop();
   function loop(){
       count++;
       console.log(count);
       requestFrame(loop);
   }

2. 移除计时器

   //设置兼容性
   var requestFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame||function(callback){
       setTimeout(callback,1000/60);
   };
   var cancelFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||function(timer){
       clearTimeout(timer);
   };
   //移除计时器
   var timer;
   var count=0;
   loop();
   function loop(){
       count++;
       console.log(count);
       if(count>19){
           cancelFrame(loop);
           return;
       }
       timer=requestFrame(loop);
   }

五、把一次性计时器写成循环计时器

1. 写法

   var num=0;
   loop();
   function loop(){
       num++;
       console.log("输出", num);
       setTimeout(loop,1000);
   }

2. 移除计时器

   var num=0;
   var timer;
   loop();
   function loop(){
       num++;
       console.log("输出", num);
       if(num>9){
           clearTimeout(timer);
           return;
       }
       timer=setTimeout(loop,1000);
   }

六、三个计时器的区别

• 一次性计时器和循环计时器在浏览器窗口失去焦点的时候还会执行。
• 帧计时器在浏览器窗口失去焦点的时候会自动暂停。