JS三大计时器

最新推荐文章于 2024-06-05 15:33:33 发布

我是你要找的bug

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量1.2k

点赞数

分类专栏： JS 计时器文章标签： js

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/104123715

版权

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

计时器

1 篇文章

订阅专栏

本文介绍了JavaScript中的三种异步计时器：setTimeout、setInterval和requestAnimationFrame，详细讲解了它们的用途和区别，包括如何将一次性计时器转换为循环计时器，以及计时器内的this指向。同时，提到了16ms自动执行计时器的兼容性写法和清除计时器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS三种计时器：（异步）

1、一次性计时器 setTimeout
2、循环计时器 setInterval
3、按照电脑的刷新频率执行默认的时间：1000/60 有兼容性写法
前两种计时器的时间可以设置也可以清除计时器

一次性计时器：

setTimeout(function(){ //function是回调函数 
  console.log(1); //1秒后执行
},1000)

function method(){
  console.log(1);
}
 setTimeout(method,1000);//可以有第三参
//setTimeout('method()',1000); //无第三参

将一次性计时器改装为循环计时器：

method(); //函数先执行一次
function method(){
  console.log(1);
  setTimeout(method,1000);
}

计时器里的this指向：window

function method(a){
 console.log(a);//输出10 
 }
 setTimeout(method,1000,10) //这里的第三参可看作是函数形参对应的实参

循环计时器

setInterval(function(){
   console.log(1);
},1000);

function method(){
  console.log(1);
  }
  setInterval(method,1000);
  //  setInterval('method()',1000);

16ms 自动执行计时器 (兼容性）

method();
function method(){
  console.log(1);
  window.requestAnimationFrame(method);
}

兼容性写法：

 var requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
        function (callback) {
            setTimeout(callback, 1000 / 60);
}
 loop();
 function loop(){
     console.log(1);
     requestAnimation(loop);
}