Web全栈20210102-js计时器

计时器异步：循环计时器setInterval()、一次性计时器setTimeout()（上面这两个计时器窗口切出不会自动暂停）、按照屏幕刷新频率执行的计时器（窗口切出自动暂停）

setInterval()方法的作用是每隔一段时间执行一次方法，清除函数效果的两个方法是window.clearInterval()(window可以省略)
(1)setInterval()方法常用的语法如下：
setInterval(function,interval)；
其中function是将要在间隔时间内执行的函数，interval是间隔的时间，单位是毫秒。
(2)clearInterval()方法的常用语法如下：
timer = setInterval(function,interval)；
clearInterval(timer);

 var count=0;
     var timer=setInterval(function (){
    
    
     //匿名函数回调

     count++;
     console.log(count);
     if(count>3)
     {
    
    
     //清除计时器
     clearInterval(timer);
     }
     },1000);//时间  ms

     function loop(){
    
    
     console.log("12");
     }

 setInterval(loop,1000);
     setInterval("loop()",1000);

    //给计时器里面传递参数
       var a=10;
       setInterval(function (args){
    
    
           console.log(args);
      },1000,a);

for (var i = 0; i < 10; i++) {
    
    
     setInterval(function (args) {
    
    
     console.log(args);
     }, 1000, i);
     }

setTimeout()和clearTimeout()
可以看到timeOutAlert()方法每隔1000毫秒调用自身，在控制台打印出当前timeOut的值，timeOut第一次使用
setTimeout()后为1，每次增加1，clearTimeout()通过这个数字作为入参清除当前的setTimeout()。



    //一次性计时器
   setTimeout(function (){
    
    
     console.log("执行一次");
     },1000);
 function time(){
    
    
     console.log(11);
     }
   setTimeout(time,1000);
   setTimeout("time()",1000);

    //把一次性计时器  该循环计时器
  var timer=null;
     var c=0;
     loop();
     function loop(){
    
    
     c++;
     console.log(c);
     if(c>4)
     {
    
    
     //清除计时器
     clearTimeout(timer);
     return;
     }
     //递归
     timer=setTimeout(loop,1000);
     }
 setTimeout(function (args){
    
    
    console.log(args);
     },1000,100);

//以上两个计时器 this 指向window
// window.setInterval(function (){
// console.log(this);
// },1000);
//要想保证计时器上下文 this指针一致

要想保证计时器上下文 this指针一致

   var page = {
    
    
        move: function () {
    
    
            console.log(this);
//            setTimeout(function (){
    
    
//                console.log(this);
//            },1000);
            var that = this;//不能用call
            setTimeout(function () {
    
    
                console.log(that);
            }, 1000);
        }
    }
    //page.move();

requestAnimationFrame 根据电脑的刷新频率走的 16ms 60hz，window.requestAnimationFrame() 类似一次性计时器

//根据不同浏览器做兼容处理
var requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
        function (time) {
    
    
            setTimeout(time, 1000 / 60);
        }

var cancelFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame ||
        window.mozCancelAnimationFrame || window.msCancelAnimationFrame ||
        function (time) {
    
    
            clearTimeout(time);
        }; 


var count = 1;
var timer = null;
loop();
function loop() {
    
    
    count++;
    console.log(count);
    if (count >= 100) {
    
    
        cancelFrame(timer);
        return;
    }
    //调用计时器
    timer = requestFrame(loop);
}

Web全栈20210102-js计时器

猜你喜欢