HTML DOM setInterval和clearInterval方法需要注意的问题

骑猪看日落 2021-12-11 15:13 297阅读 0赞

在javascript编程中，setInterval可以帮助我们实现一个定时器的功能，能够让我们定时执行某一项操作，如果不需要继续执行了，我们只需要调用clearInterval函数，清除定时器即可。

这里要重点说的是清除定时器的时机，我们一般是需要进行一个条件判断，比如 var count=5,我们定时执行count--操作，当count==0的时候，清除定时器，一般情况下，我们的代码是这样写的。

![20190709121634245.png][]

这段代码，逻辑上没有什么问题， 就是当count==0的时候，我们清除定时器。我们运行这段代码，看看效果：

![20190709121834279.png][]

我们惊奇的发现，并不是我们想象中的那样，setInterval这个函数，并不会在清理定时器之后，就退出，后续的操作还是会执行。为了让清除定时器之后的代码不再执行，我们可以直接进行return返回。

![20190709122219451.png][]

这种办法是可行的，但是也是没有太大的必要，我们可以进行简单的语句顺序调换，把条件判断放到最后，我们的代码就成了这样。

![20190709122608307.png][]

同样，可以达到我们预期的效果：

![20190709122635115.gif][]

setInterval函数执行，会返回一个定时参数，这里我们叫interval，当我们需要清除定时器的时候，就直接传入这个参数，如clearInterval(interval)。

[20190709121634245.png]: /images/20211211/61f105e9c84544e183b55f55ea7de745.png
[20190709121834279.png]: /images/20211211/9f5b138cc5444dddbab1faac536c9303.png
[20190709122219451.png]: /images/20211211/e8f96b28444341bcadc465ac0eca71df.png
[20190709122608307.png]: /images/20211211/966737d6d8f34ea2ab0b43076bb6ec58.png
[20190709122635115.gif]: /images/20211211/8b1597ee75634419b4a26bb2cb18d4cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现可以控制的定时器，setInterval，clearInterval

JS实现可以控制的定时器，setInterval，clearInterval 效果展示 ![在这里插入图片描述][0c76ca6e96754a6582faa9ffe

野性酷女/ 2024年03月31日 16:30/ 0 赞/ 89 阅读

相关 JS中setInterval()和clearInterval()的使用

实现功能是要在一个文件列表的右侧操作区加一个验证md5的按钮，用来验证每个上传的文件的完整性，刚开始实现的思路是：点击按钮，触发checkMd5接口请求，后端用异步的方式将文件

我不是女神ヾ/ 2023年10月12日 08:59/ 0 赞/ 69 阅读

相关 Javascript setInterval多次，导致clearInterval失败

Javascript setInterval多次，导致clearInterval失败的解决办法：方法一 [点击次数计数器方法][Link 1]：https://b

超、凢脫俗/ 2023年09月29日 17:17/ 0 赞/ 31 阅读

相关 javascript中定时执行的方法setinterval()和settimeout()和clearinterval()

Document自带的方法：循环执行：var timeid = window.setInterval（“方法名或方法”，“延时”）; window.clearIn

ゝ一世哀愁。/ 2022年12月31日 14:22/ 0 赞/ 156 阅读

相关 setInterval和clearInterval 讲解

setInterval和clearInterval 讲解 2006-5-28 22:35:36 来源：本站评论：1 <<浅释ActionScript代码优化

﹏ヽ暗。殇╰゛Y/ 2022年08月27日 12:51/ 0 赞/ 210 阅读

相关 setInterval用法注意

function public\_showmsg()\{ var timestamp,onlineTime; timestamp = Date

妖狐艹你老母/ 2022年06月18日 01:22/ 0 赞/ 253 阅读

相关 JS 实现定时操作隐藏显示图片（setInterval() clearInterval()）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

ゝ一纸荒年。/ 2022年05月15日 15:54/ 0 赞/ 259 阅读

相关 JS中setInterval()和clearInterval()的使用以及注意事项（实用，赞）

原文出处：[https://blog.csdn.net/YDesire/article/details/81124331][https_blog.csdn.net_YDesir

红太狼/ 2022年05月04日 06:58/ 0 赞/ 225 阅读

相关 HTML DOM setInterval和clearInterval方法需要注意的问题

在javascript编程中，setInterval可以帮助我们实现一个定时器的功能，能够让我们定时执行某一项操作，如果不需要继续执行了，我们只需要调用clearInterva

骑猪看日落/ 2021年12月11日 15:13/ 0 赞/ 298 阅读

相关控制器中方法需要注意的一个问题

天做项目时碰到一个很奇怪的问题，如下图所示，我只是做一个简单的页面跳转。

红太狼/ 2020年11月29日 15:50/ 0 赞/ 555 阅读