嘿!兄弟姐妹们,今天咱们来聊聊 JavaScript 中的 setTimeout 、setInterval 以及 clearInterval 这仨货!
别看这三个名字长得有点像,它们可是有着不同的性格和脾气。
咱们先来认识一下 setTimeout 这个家伙。
它就像一个爱迟到的朋友,你叫它干活,它总会磨磨蹭蹭地等个几秒钟才开始行动。
setTimeout 的语法很简单:
javascript
setTimeout(function, delay);
function 就是你要它执行的代码,delay 则是延迟的时间,单位是毫秒。
举个栗子,你想让网页在 2 秒后弹出一个提示框,就可以这样写:
javascript
setTimeout(function() {
alert("2 秒到了,快来点个赞!");
}, 2000);
是不是很简单?
接下来,我们认识一下 setInterval 这个家伙。
它就像个永动机,你叫它干活,它会没完没了地重复执行,直到你叫它停下来。
setInterval 的语法和 setTimeout 很像:
javascript
setInterval(function, delay);
function 还是你要它执行的代码,delay 是重复执行的间隔时间,单位也是毫秒。
举个栗子,你想让网页每隔 1 秒钟就更新一次时间,就可以这样写:
javascript
setInterval(function() {
document.getElementById("time").innerHTML = new Date().toLocaleString();
}, 1000);
我们来认识一下 clearInterval 这个家伙。
它就像一个紧急制动器,可以随时让 setInterval 停止工作。
clearInterval 的语法也很简单:
javascript
clearInterval(intervalID);
intervalID 是 setInterval 返回的标识符,用来识别哪个定时器。
举个栗子,你想要停止上面的时间更新,就可以这样写:
javascript
clearInterval(intervalID);
总结一下,setTimeout 和 setInterval 就像一对孪生兄弟,一个只会干一次,一个会一直干下去。
而 clearInterval 就是他们的老爸,可以随时叫停他们。
不过,setInterval 有个小毛病,就是它会一直执行下去,如果你的代码执行时间过长,就会导致后面的执行任务延迟,甚至出现卡顿现象。
所以,在实际应用中,我们通常会用 setTimeout 来代替 setInterval ,通过不断地调用 setTimeout 来实现类似 setInterval 的效果。
举个更实际的例子:
假设你要做一个网页版的秒表,你就可以用 setTimeout 来实现:
javascript
let startTime = new Date().getTime();
let timer = document.getElementById("timer");
function updateTimer() {
let elapsedTime = new Date().getTime() - startTime;
timer.innerHTML = formatTime(elapsedTime);
function formatTime(ms) {
let seconds = Math.floor(ms / 1000);
let minutes = Math.floor(seconds / 60);
seconds %= 60;
return minutes + ":" + (seconds < 10 ? "0" + seconds : seconds);
function startTimer() {
updateTimer();
setTimeout(startTimer, 1000);
startTimer();
这段代码会每隔 1 秒钟更新一次秒表的时间,而且不会出现卡顿现象。
怎么样,是不是感觉 setTimeout 和 setInterval 这两个家伙还挺有意思的?
如果你还有其他欢迎在评论区留言,我们一起探讨探讨!