JS中 setTimout 和 setInterval 的区别（延时器、定时器）

本文链接：https://blog.youkuaiyun.com/m0_66757598/article/details/137769196

setTimeout()是延时器:
setTimeout(fn(),delay) 在执行时,是在载入后延迟指定时间后,去执行一次表达式,注意只执行一次； setTimeout函数只会执行一次；执行一段代码一次； setTimeout函数会在指定的时间后执行一次代码
setInterval()是定时器：
setInterval(fn(),delay) 在载入后,每隔指定的时间就执行一次表达式； setInterval函数会不断重复执行；执行一段代码多次； setInterval函数则会在每隔指定的时间后重复执行代码;

setTimeout(function(){
    alert("hello,setTimeout()");
}, 1000);

运行之后，它会在1s的延迟之后，弹出一个弹框，其中1000的单位是毫秒！

运行之后，每过1秒，就会弹出一个弹窗，显示这段话

setInterval(function(){
    alert('hello,setInterval()');
}, 1000);

案例：

最后，我们用学习的setTimeout()函数和setInterval()函数联动做一个新年倒计时案例吧：

我们想要这样的效果：

首先，实现在屏幕上展示60秒倒计时；

在倒计时为0后，弹窗展示新年快乐！

有人看了这个说明，觉得那么我们的代码应该是这样的：

var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {
    element.innerHTML = "新年倒计时：" + clock + " !";
    console.log(clock)
    clock--;
    if (clock < 0) {
        clearInterval(timer);
        alert("新年快乐！");
    }
}, 1000);

乍一看，好像没问题，但实际运行的时候，由于向html写入内容有一个小延迟，会导致最后倒计时0这个数字没被写进去就会弹窗，因此我们要在倒计时最后一秒，用setTimeout()做一个小缓冲：

if (clock < 0) {
    clearInterval(timer);
    setTimeout(function () {
        alert("新年快乐！")
    }, 500)
}

于是完整的代码应该是这样的：

<!DOCTYPE html>
  
<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>新年倒计时</title>
    <style>
        body {
            background-image: url(./1.jpg);
        }
    </style>
</head>
  
<body>
    <h1 id="xin-nian" style="text-align: center;margin-top: 250px;font-size: 50px;"></h1>
    <script>
        var element = document.getElementById("xin-nian")
        var clock = 60;
        var timer = null;
        timer = setInterval(function () {
            element.innerHTML = "新年倒计时：" + clock + " !";
            console.log(clock)
            clock--;
            if (clock < 0) {
                clearInterval(timer);
                setTimeout(function () {
                    alert("新年快乐！")
                }, 500)
            }
        }, 1000);
    </script>
  
</body>
  
</html>

实现的效果是下面这样的动图