settimeinterval, setTimeout 和 setInterval 怎么用?

吉云

嘿!兄弟姐妹们,今天咱们来聊聊 JavaScript 中的 setTimeout 、setInterval 以及 clearInterval 这仨货!

别看这三个名字长得有点像,它们可是有着不同的性格和脾气。

settimeinterval,  setTimeout 和 setInterval  怎么用?

咱们先来认识一下 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 这两个家伙还挺有意思的?

如果你还有其他欢迎在评论区留言,我们一起探讨探讨!

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。

目录[+]