社区首页 >专栏 >js内置对象---计时器对象

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

原创

IT工作者

发布于 2022-03-29 02:13:11

2.5K00

代码可运行

文章被收录于专栏：程序技术知识程序技术知识

运行总次数：0

代码可运行

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

一、计时器对象简介

二、一次性计时器

1. 一次性计时器的写法

2. 清除计时器

三、循环计时器

1. 一次性计时器的写法

2. 清除计时器

四、帧计时器

1. 设置兼容性

2. 移除计时器

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

1. 写法

2. 移除计时器

六、三个计时器的区别

一、计时器对象简介

计时器对象分类

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

二、一次性计时器

计时器的参数有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);
   }