JavaScript定时器(BOM)

xiaomo

定时器

所谓的“定时器”，指的是每隔一段时间就执行一次代码，在JavaScript中，对于定时器的实现，有以下2组方法：

setTimeout()，clearTimeout()

window对象的setTimeout()方法用于设置一个延时，即在多少毫秒之后执行指定的某个函数或某段代码。（一次性）

并且可以使用clearTimeout()来取消执行setTimeout()

基本语法(启动定时器)：


setTimeout("function();",delaytime);

// 定义一个变量 (timerId) 用于保存 setTimeout() 这个定时器，以便使用 clearTimeout(timerId) 来取消。
timerId = setTimeout("function();",delaytime);

结束（取消）定时器：

clearTimeout(timerId );

// 3秒后再console里打印一句xiaomo


setTimeout(function (){
    console.log('xiaomo');
},3000);



function x(){
    console.log('xiaomo');
}
setTimeout(x,3000);

// 开关灯
<div id="div1"></div>
<button type="button" id="btn1">开灯</button>

<script>
    let oBtn=document.getElementById('btn1');
    let oDiv=document.getElementById('div1');

    //1.定义一个定时器的变量
    let timer;

    oBtn.onclick=function (){
        oDiv.style.background='yellow';

        //3.当多次执行时，先把上一次开着的定时器关掉，再往下执行开新的
        clearTimeout(timer);  //第一次执行时这还是个undefined，会自动忽略

        //2.然后把（开）定时器里的内容存起来
        timer=setTimeout(function (){
            oDiv.style.background='#ccc';
        },5000);
    };
</script>

定时器有多次执行或者使用setInterval()时一定要先关再开！！！否则很容易出现一些不可预料的情况。

setInterval()，clearInterval()

setInterval()的用法与setTimeout()一样，区别仅仅在于setInterval()指定某个任务每隔一段时间就执行一次（重复执行）
同样可以使用clearInterval()来取消执行setInterval()

基本语法：

timerId = setInterval("function();",delaytime);

结束（取消）定时器：

clearInterval(timerId );

// 每隔1秒打印一次当前的时间戳
// 时间戳 ，从1970-1-1 00:00:00:000 到此时此刻的毫秒数
    setInterval(function (){
        console.log(Date.now());
    },1000);

定时器每两次之间都会间隔，从开启定时器到第一次执行也有（定义了的延迟时间）间隔

setInterval(function,1000);
  1s
第一次
  1s
第二次
  1s
第三次
  1s
...

实例

<button type="button" id="btn1">发送短信</button>

<script>
    let oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        this.disabled=true;
        this.innerHTML='10秒后重发';

        //设置一个倒计时变量
        // let remain=10;
        let remain=11;

        function tick(){
            //定时器每重复执行一次就减一
            //方法一：这里默认的remain变量由于进来是就--了1，所以看到时就默认从9开始了，想要从10开始的话，就还要+1
            remain--;

            //这里用一个判断来对比一下倒计时变量，不然倒计时变量会走负数
            if (remain>0){
                oBtn.innerHTML=remain+'秒后重发';
            }else{
                clearInterval(timer);
                // this.disabled=false;
                // this.innerHTML='发送短信';

                // 定时器里直接使用this的坑，会把this变成window
                //console.log(this);
                //console.log(this==window);

                //当前的解决方案就是不去用它
                oBtn.innerHTML='发送短信';
                oBtn.disabled=false;
            }
        }

        let timer=setInterval(tick,1000);
        tick();
    }
</script>