js间隔调用和延迟调用（定时器延时器）

4.1 定时器

setInterval(表达式，毫秒数)

语法：var timer = null；

timer = setInterval(需要执行的函数，执行间隔时间ms)；

例如：var timer = null；

timer = setInterval(function(){

console.log('hello world!');

},2000);

总结说明：

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2019-9-22 18:00:00');
    // 在定时器获取之前，先运行一次，这样不会显示原始默认的1 2 3
    getInterval();
    // 每秒钟获取一次事件
    setInterval(getInterval, 1000);
    function getInterval() {
            var nowTime = +new Date();
            var interval = (inputTime - nowTime) / 1000;     //两个日期相差的秒数
            var hours, minutes, seconds;
            hours =  Math.floor(interval / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            hour.innerHTML = hours;
            minutes =  Math.floor(interval / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            minute.innerHTML = minutes;
            seconds =  Math.floor(interval % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;
            second.innerHTML = seconds;
        }
    </script>
</body>

清除定时器

window.clearInterval(intervalID)；

<body>
    <button class="begin">开始定时器</button>
    <button class="stop">结束定时器</button>
    <script>
        var i = 1;
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; //全局变量，null 是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('你好啊' + i);
                i = i + 1;
            }, 1000);
        });
        stop.addEventListener('click', function() {
            clearInterval(timer);
        });
    </script>
</body>

倒计时效果
分析：
这个倒计时是不断变化的，所以使用 setInterval() 来实现
三个黑色盒子里面分别放时分秒
三个黑子盒子的利用 innerHTML 放入计算的小时分钟秒数
第一次之前也是间隔一定的毫秒数，所以在定时器的前面先调用一下刷新时间的函数，防止第一次刷新之前有空白
window 可以省略
里面的参数是定时器的标识符
点击按钮之后，将按钮禁用，disable 为 true
一秒钟修改一次 button 里面的内容

定义一个变量为秒数，这个数值定时变化，如果为0，说明时间到，按钮恢复原始状态

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2019-9-22 18:00:00');
    // 在定时器获取之前，先运行一次，这样不会显示原始默认的1 2 3
    getInterval();
    // 每秒钟获取一次事件
    setInterval(getInterval, 1000);
    function getInterval() {
            var nowTime = +new Date();
            var interval = (inputTime - nowTime) / 1000;     //两个日期相差的秒数
            var hours, minutes, seconds;
            hours =  Math.floor(interval / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            hour.innerHTML = hours;
            minutes =  Math.floor(interval / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            minute.innerHTML = minutes;
            seconds =  Math.floor(interval % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;
            second.innerHTML = seconds;
        }
    </script>
</body>

发送短信案例

点击发送验证码之后，该按钮在60秒只能不能再被点击，防止重复发送短信

分析

<body>
    手机号码：
    <input type="number" name="" id="">
    <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var i = 60;
            var timer = setInterval(function() {
                if (i == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送验证码';
                    i = 60;
                } else {
                    btn.innerHTML = i + '秒之后可以再次点击';
                    i--;
                }
            }, 1000);
        });
    </script>
</body>

this 的指向问题

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，一般情况下 this 的最终指向的是那个调用它的对象。

要把定时器下边的任务执行完毕后才会去执行定时器的内容
2.定时执行中this指向window
3.每创建一个定时器就会有一个唯一的id被返回 id从开始之后累加
首先明确两点：
1.JS 执行机制是单线程。
2.JS的Event loop是JS的执行机制
按照这种的分类方式JS的执行机制是：
异步的编程思想：
首先，判断JS是同步还是异步，同步进入主线程，异步进入Event table
其次，异步任务在Event table中注册函数，当满足特定的条件，被推入Event queue（消息队列）最后，同步任务进入主线程后一直执行，直到主线程空闲后，才会去Event queue中查看是否有可执行的异步任务，如果有就推入主线程中执行。
清除间隔调用
既然间隔调用每隔一段时间就会自动执行一次，那么清除间隔调用就势必存在。
语法：clearInterval(变量标识)
例如：clearInterval(timer);
上述代码就能够将刚刚创建的定时器移除掉，令其不在间隔一段时间后自动再次执行。
延时器
延迟调用又叫延迟调用函数。是一种能够等待一定时间后在执行的函数。
语法：var timer = null;
    timer = setTimeout(需要执行的函数，等待的时间);
例如：var wait = null；
    wait = setTimeout(function(){
console.log('hello world!');
    },2000);
根据语法所述，上述代码所表示的含义为：等待2s后打印一句

原文链接：https://blog.csdn.net/m0_51281306/article/details/121340034

4.1 定时器

清除定时器

倒计时效果

发送短信案例

this 的指向问题

延时器