}, 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)
}
于是完整的代码应该是这样的: