JS内置的计时器及其初步使用

1.循环计时器

setInterval();

    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);
     }

2.一次性计时器

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指针一致 当apply和call无法使用时  用that替换this  
    var page = {
        move: function () {
            console.log(this);
//            setTimeout(function (){
//                console.log(this);
//            },1000);
            var that = this;
            setTimeout(function () {
                console.log(that);
            }, 1000);
        }
    }
    page.move();

3.切屏可暂停计时器

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

 //根据不同浏览器做兼容处理
    var requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
            function (time) {
                setTimeout(time, 1000 / 60);
            }
            
//根据不同浏览器做兼容处理  **（当用window.时 window.cancelRequestAnimationFrame 不识别 要去除中间的Rquest 其他的一样）**
    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);
    }