DOM定时器和延时器定时器 setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔。案例

定时器

setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔。

setInterval(function() {
//这个函数将自动被以固定间隔时间调用
},2000 单位是毫秒 );

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 0;
        setInterval(function(){
            console.log(++a);
        },2000);
    </script>
</body>
</html>

函数的参数

setInterval()函数可以接收第3、4.....个参数，他们将按照顺序传入函数。

setInterval(function(a,b) {
//这个函数将自动被以固定间隔时间调用
},2000 单位是毫秒,88,66对应a,b );

具名函数做函数参数

function fun(){
    console.log(++a);
 };
 setInterval(fun,1000);

清除定时器

clearInterval()函数可以清除一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="info">0</h1>
    <button id="btn1">开始</button>
    <button id="btn2">结束</button>
    <script>
        var oInfo=document.getElementById('info');
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');

        var a=0;
        // 设置全局变量
        var timer;
        oBtn1.onclick = function(){
            // 为了防止定时器叠加，应该在设置定时器之前先清除定时器
            clearInterval(timer)
            // 更改全局变量timer的值为一个定时器实体
             timer = setInterval(function(){
                oInfo.innerText = ++a;
            },1000);
        };
        oBtn2.onclick = function(){
            clearInterval(timer);
        };
    </script>
</body>
</html>

延时器

setTimeout()函数可以设置一个延时器，当指定时间到了之后，会执行一次函数。不再重复执行。

setTimeout(function() {
//这个函数会在2秒之后执行一次
}，2000);

清除延时器

clearTimeout()函数可以清除延时器，和clearInterval()非常相似

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">两秒后弹出你好</button>
    <button id="btn2">取消弹出</button>
    <script>
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var timer;

        oBtn1.onclick = function(){
            timer = setTimeout(function(){
                alert('你好');
            },2000);
        };
        oBtn2.onclick = function(){
            clearTimeout(timer);
        }
    </script>
</body>
</html>

初步认识异步语句

setTimeout()和setInterval()都是异步语句