定时器

定义

js中内置的一个方法，每隔一段时间或者延迟一段时间去执行一段指定的代码

分类

• 重复执行定时器

setInterval();
作用：每隔一段时间去重复执行指定的函数（会执行函数多次）

• 延迟执行定时器

setTimeout();
作用：延迟一段时间去执行指定的函数（只执行函数一次）

语法

• 有两个参数，两个参数用“ , ”隔开

setInterval(function(),时间);

setTimeout(function(),时间);

• 前面一个参数为需要重复执行（延迟执行）的代码
  • 可以直接将代码写在函数内

    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
          setInterval(function(){
              i++;
              box.innerHTML=i;
          },1000);  
    }; 
  

  • 也可以将函数在代码外声明后进行调用

    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
          setInterval(change,1000);
    }; 
    function change(){
        i++;
        box.innerHTML=i;
    };

注意：调用函数时，直接写上函数名字即可，不用加()，若带上()就为函数返回值了

• 后面一个参数为重复执行（延迟执行）代码的间隔时间

  注意：
  1.时间单位为ms
  2.若未设置时间参数，则默认为10ms（来自于官方文档）

调用

为了便于定时器的清除，一般是在函数外声明一个变量，然后调用时将定时器赋值给该变量

var timer;
btn.onclick=function(){
    timer=setInterval();
};

定时器中的this

• this的指向

定时器是window中的一个方法，可以写成window.setInterval()或者window.setTimeout()，故定时器中的this指向的是window

window.onload=function(){
    var box=document.getElementById('box');
    var i=0;
    console.log(this);          //window    这里是由window调用的函数，所以这里this为window
    box.onclick=function(){
        console.log(this);      //box       这里是由box点击以后调用的函数，所以这里this为box
        setInterval(function(){
            console.log(this);  //window
            i++;
            box.innerHTML=i;
        },1000);  
    }; 
};

• 使用上级函数中的this

在调用定时器的函数里声明一个变量a，然后将该函数里的this赋值给a，定时器中的函数如果需要运用到调用它的函数中的this，用a来代替

window.onload=function(){
    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
        var  a=this;          //声明变量a
        setInterval(function(){
            i++;
            a.innerHTML=i;    //在定时器所要触发的函数中使用变量a，由于在自己的作用域里寻找不到，就会去它的上级里寻找a，找到a，那就是找到了上级函数的this
        },1000);  
    }; 
};

定时器返回值（定时器的编号）

定时器的返回值是数字，代表是第几个定时器

注意：不同浏览器的返回值不同

var n=0;
function add(){
    n++;
};
console.log(setInterval(add,1000));      //在控制栏输出定时器的返回值

清除定时器

• 原理

利用定时器的返回值去清除定时器

注意：
1.不同浏览器的定时器的返回值不同，存在兼容性问题，故不能直接用返回值去清除，需要将返回值存在变量里，然后用变量去清除定时器
2.定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排

• 方法

clearInterval(定时器的返回值);      //清除重复执行定时器
clearTimeout(定时器的返回值);       //清除延迟执行定时器

定时器的清除方法可以互用
clearInterval()可以用来清除setTimeout()
clearTimeout()可以用来清除setInterval()
只是一个小拓展，在清除定时器的时候还请一一对应

• 示例

  • 直接使用返回值（不推荐，存在兼容性问题）

var n=0;
function add(){
    n++;
    console.log(n);
    if(n==8){
        clearInterval(1);        //在chrome中，这个定时器的返回值为1，直接写入返回值就可以清除，但不推荐这么做，因为存在兼容性问题
    }
};
setInterval(add,1000);

• 将返回值存在变量中（推荐做法）

var n=0;
function add(){
    n++;
    console.log(n);
    if(n==8){
        clearInterval(Timer);
    }
}
var Timer=setInterval(add,1000);
问题：
这里的定时器是在声明的变量里，是如何调用的？
这里是将定时器的返回值赋值给了变量Timer，但是如果需要去获取返回值，那么函数就需要被调用，所以这里的函数是被调用了的