定时器

老师您好，我按照您教的办法去写了倒计时案例，中间发现了这样一件事

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="info1">距离2025高考还有</h2>
    <h2 id="info2"></h2>
    <script>
        var info2 = document.getElementById('info2');
        var padZero = function(n) {
            return n < 10? '0' + n : n;
        }
        setInterval(function(){
            var d1 = new Date();
            var d2 = new Date('2025-06-07');
            var dd = d2 - d1;
            var day = parseInt(dd / (1000*60*60*24));
            var hour = parseInt(dd % (1000*60*60*24)/(1000*60*60));
            var min = parseInt(dd%(1000*60*60)/(1000*60));
            var sec = parseInt(dd%(1000*60)/1000);
            info2.innerText = padZero(day) + '天' + padZero(hour) + '小时' + padZero(min) + '分钟' + padZero(sec) + '秒';
        })
 
    </script>
</body>
 
</html>

如果我的定时器setInterval没有书写第二个参数1000ms，那么就不会存在刚打开页面有1秒钟空白的问题，这是为什么呢？这算不算是错误，不知道能不能刻意这样用

后山闲人 2024-11-25

源自：面向对象 7-15 Date（日期）对象（2）

收起

1回答

好帮手慕小李 2024-11-25 16:57:53

同学你好，我在之前的代码中给你直接解决过这个问题，因为你用的是定时器所以会出现1秒延时（出现空白），那么要在页面加载的时候马上获取并显示出来当前的日期（或去计算得出来的时间）让其没有延时展示。

我之前的代码：

那么根据你现在提供的代码可以如下进行调整：

祝学习愉快！

收起回答

提问者后山闲人 #1

谢谢老师，可能是我没有书写清楚，您之前教我的封装一个函数并在定时器之前调用一次的方法我记住了。我上传的这段代码是我一时大意忘记给我的定时器书写第二个时间间隔参数～它反而直接就在页面上显示倒计时没有1秒空白时间了，就和您教我的方法在效果上一样了。我很好奇是这是怎么回事，所以又来询问一下😅

2024-11-25 17:23:49
好帮手慕小李回复提问者后山闲人 #2

1、如果不写时间或者说我们直接写0的话，你可以理解为定时器直接“尽快执行”或者说“直接”执行了，不受到任何时间约束，这里有一个排队机制，因为我们没填写时间那么在排队的时候就不在收时间的约束。
要弄懂它要去学定时器的底层原理，实战课里有一些关于原生的课程你感兴趣可以听听，或者你感兴趣的话，可以去扩展一下js单线程模型和事件循环。
2、可以这么用，看似是bug但是可以利用这个“bug”的特性去解决一些异步效果等问题的小解决方案。

2024-11-25 17:32:18
提问者后山闲人回复好帮手慕小李 #3

啊我懂了感谢老师解答

2024-11-25 17:34:27