JavaScript之setTimeout与setInterval的用法与区别

}, 1000)

}

那为啥使用let就可以了呢：

其实使用let之后，也没有改变执行机制，仍然是最后执行的alert()，但是let可以在每一次把更新的变量i传进函数体内，也就是每一次的i加1之后，会把这个新值放进队列中对应的函数内，于是就解出了这个问题。

2️⃣ 定义一个外部变量：

我们在外部定义一个变量，这样这个变量每一次会被放入队列中，依旧不改变本身的执行机制：

var j = 1;

for (i = 1; i <= 5; i++) {

setTimeout(function () {

alert(j)

j++;

}, 1000);

}

第二种做法，更容易被别人看懂，也更适合做项目时实际使用。

---

III. setInterval()函数

---

第二个函数setInterval()就没那么复杂了，但是它的功能确实很强大的，我们先看看它的使用格式：

setInterval(function,times);

依旧是两个参数，同setTimeout()格式一致，它可以以设置的times为间隔来循环重复function，我们用一个小例子来测试一下：

setInterval(function(){

alert(‘hello,setInterval()’);

}, 1000);

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

那运行之后，我们想当然会有一个问题，那就是可以在某个特定的时机让它不再循环执行了吗？答案是肯定滴，只不过我们需要定义一个setInterval()函数的对象，我们一般取名叫：timer：

var i = 5;

var timer = setInterval(function(){

i --;

if(i < 0){

clearInterval(timer);

}

alert(‘i’);

}, 1000);

上面的代码中，我们给setInterval创建了一个对象叫timer，在外部我们定义了另一个变量i，之后我们每一次执行Interval内的函数时，就让 i-1 ，减到0以下，清除定时器：

clearInterval(timer对象)；

上面这句话是清除定时器的代码，传入一个setInterval()函数的对象即可。

---

IV. 新年倒计时案例

---

最后，我们用学习的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)

}

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