十三章 定时器

一、定时器

1、含义：就是 js 给我们让我们延迟执行一段代码 或者是重复执行一段代码==是js延迟执行代码的一种机制；

2、分类：一次性定时器(炸弹定时器)和反复性定时器(间歇性定时器)；

二、开始定时器

1、第一类: 一次性定时器(炸弹定时器)；

        （1）语法: setTimeout(function () {},时间)；

        （2）时间: 使用的是毫秒数；

        （3）执行机制: 只能执行一次 , 就是指定的时候到了以后执行；

        // 开启定时器
        // 第一类: 一次性定时器(炸弹定时器)
        setTimeout(function () {
            console.log('我执行了');
        },2000)

2、第二类: 反复性定时器(间歇性定时器)

        （1）语法: setInterval(function () {},时间)；

        （2）时间: 使用的是毫秒数；

        （3）执行机制: 每间隔一定的时间执行一次；

        // 第二类: 反复性定时器(间歇性定时器)
        setInterval(function () {
            console.log(666);
        },2000)

3、定时器的返回值

        不管是那种定时器 , 都是有返回值的，返回值就是一个数字，表示的是页面上有几个定时器(第几个定时器)；

三、关闭定时器

1、第一类: 一次性定时器(炸弹定时器)；

语法: clearTimeout(你要关闭的定时器)；

2、第二类: 反复性定时器(间歇性定时器)；

语法: clearInterval(你要关闭的定时器)；

注意：两个是交换使用，但是习惯一一对应关闭；

        // 关闭定时器
        btn.onclick = function () {
            // 第一类: 一次性定时器(炸弹定时器)
            // clearTimeout(res)
            // 第二类: 反复性定时器(间歇性定时器)
            clearInterval(time)

            // 可以关闭任意定时器
            // 第一类: 一次性定时器(炸弹定时器)
            // clearTimeout(time)
            // 第二类: 反复性定时器(间歇性定时器)
            clearInterval(res)
        }
        

四、异步执行

1、含义：非同步执行

2、同步执行：从上向下的执行，在不考虑优先级的情况下从左向右执行；

3、异步代码的执行：优先要执行同步代码，之后在同步代码执行完毕以后才会执行异步代码；

4、那些是异步执行代码：定时器

        // 异步代码的执行
        console.log('start');

        // 定时器
         setTimeout(function () {
             console.log(666);
         },0)

        // setInterval(function () {
        //     console.log(999);
        // },0)


        console.log('end'); 

        //执行结果：start end 666/999 

五、案例

1、设置一个时间差

// 封装函数获取时间差
function diffTime(t1, t2){
    var res = Math.ceil(Math.abs(t1 - t2)/1000)
    // 对象方便操作，所以可以返回对象形式
    return {
        day : parseInt(res / (69 * 60 * 24)),
        hours : parseInt(res % (60 * 60 * 24) / ( 60 * 60 )),
        minutes : parseInt(res % ( 60 * 60 ) / 60),
        second : res % 60
    }
}

// 第二种
function diffTime(t1, t2) {
   t1 = new Date(t1)
   t2 = new Date(t2)
    // 定义一个接收差值的变量,可以直接相减也可以直接得到格林时间，先变成s
    // 时间里面一般是选择向上取整
    var diff = Math.ceil(Math.abs(t1 - t2) / 1000)

    // 这是diff变成了秒，进行转化成时间的操作
    var day = parseInt(diff/60/60/24)
    var hours = parseInt(diff/60/60%24)
    var minutes = parseInt(diff/60%60)
    var s = parseInt(diff%60)
    return diff=`两个时间相差：${day}天${hours}时${minutes}分钟${s}秒钟`
}

2、设置一个倒计时

// 设置一个定时器
function countDown(){
    var time2 = new Date( '2022-12-1 10:00:0')
    setInterval(function (){
        var timel = new Date()
        // 获取时间差
        var res = diffTime(timel,time2)
        box.innerText = `距离结还有${ resday }天 ${ res.hours }小时${  res.minutes} 分钟 ${ res.second} )秒`
    },1000)
}