android h5app息屏定时器,H5案例分享：JS设置定时器和清除定时器

川长思鸟来 2022-10-18 00:49 386阅读 0赞

![df9871f70e75c488f2952c1108fc5bcc.png][]

JS设置定时器和清除定时器

在做项目中难免会碰到需要实时刷新，动画依次出现等等需求，这时候就需要定时器登上我们的代码舞台了，所以今天我们就先来了解一下JS定时器的设置和清除吧。

一、启用定时器

window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：

window.setTimeout(code,millisec);

window.setInterval(code,millisec);

其中，code可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec，表示延时或者重复执行的毫秒数。

具体写法如下：

函数名，不带参数

setTimeout (test,1000)；           //1秒后执行

字符串，可以执行的代码

setTimeout ('test()',1000)；       //1秒后执行

匿名函数

setTimeout (function()\{\},1000)；   //1秒后执行

注：setInterval的用法与setTimeout一样

调用函数，带参数

setTimeout ('test(参数)',1000)；      //1秒后执行

注：如果不小心写成了setTimeout (test(参数),1000)；test方法就会立即执行哦。

DEMO代码：

![4157d2e0d4a6eb610b0d052c3d444fb6.png][]

执行结果：

![5c6c3cd905b704bfe2acab08b440cc9b.png][]

二、清除定时器

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。

定时器清除的方法：clearTimeout(obj)和clearInterval(obj)。

要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。如下：

//setTimeout 1000ms后执行1次

var test1 = setTimeout(function()\{

//your codes

\},1000);

//setInterval 每隔1000ms执行一次

var test2 = setInterval(function()\{

//your codes

\},1000)

//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)

clearTimeout(test1);

//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)

clearInterval(test2);

注：有时候在写的时候，还会习惯将清空的定时器的变量置空，这样写既可以释放内存，也可以便于后边代码的判断。

好啦，今天的轻知识就分享到这里了，我们下期再见~

[df9871f70e75c488f2952c1108fc5bcc.png]: /images/20221014/7d9cd719a75f46d69e976ef9af160f1c.png
[4157d2e0d4a6eb610b0d052c3d444fb6.png]: /images/20221014/3028db053e9144da83fdc622954606ac.png
[5c6c3cd905b704bfe2acab08b440cc9b.png]: /images/20221014/1acaeaebbf1343649d6658fa4a32f600.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue设置定时器、清除定时器

1、一次性定时器`setTimeout` let timer = setTimeout(() => { //需要定时执行的代码

系统管理员/ 2024年04月08日 08:37/ 0 赞/ 92 阅读

相关 uni-app定时器清除问题

在uni-app 涉及到定时器清除问题: 1.在一般的页面用 onUnload(){ } 2.在tabbar页面，用 onHi

拼搏现实的明天。/ 2023年02月25日 03:37/ 0 赞/ 15 阅读

相关 js清除所有定时器（包括未知定时器）

我们有时会有清除页面中所有定时器的需求如果我们在创建定时器(`setInterval`)的时候用一个变量保存了它，那么清除这个定时器很简单，直接清除(`clearInte

素颜马尾好姑娘i/ 2023年01月12日 01:55/ 0 赞/ 313 阅读

相关 JavaScript定时器setTimeout和setInterval()以及清除定时器

JavaScript定时器setTimeout和setInterval window对象提供了两种好用的计时器：setTimeout()和setInterval()

我就是我/ 2022年12月25日 11:53/ 0 赞/ 241 阅读

相关倒计时的实现之设置定时器与清除定时器

定时器的清除和设置：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

骑猪看日落/ 2022年12月22日 15:23/ 0 赞/ 239 阅读

相关 android h5app息屏定时器,H5案例分享：JS设置定时器和清除定时器

![df9871f70e75c488f2952c1108fc5bcc.png][] JS设置定时器和清除定时器在做项目中难免会碰到需要实时刷新，动画依次出现等等需求，这时

川长思鸟来/ 2022年10月18日 00:49/ 0 赞/ 387 阅读

相关 PyQt5定时器

想必大家都知道呢定时器的功能，就是在固定的一段时间内执行一段逻辑，下面我们来一起分析下，首先看一段代码自定义object对象，重写里面的timerEvent方法

野性酷女/ 2022年03月01日 16:38/ 0 赞/ 296 阅读

相关 JS的定时器和清除定时器

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。常用的定时器有2种 setTimeout(function() {}, 1000);

亦凉/ 2022年01月21日 12:09/ 0 赞/ 420 阅读

相关 js中两种定时器的设置及清除【清除当前的定时器很有效】

[https://www.cnblogs.com/Dream2hc/p/web23863.html][https_www.cnblogs.com_Dream2hc_p_web2

曾经终败给现在/ 2021年09月19日 03:34/ 0 赞/ 380 阅读

相关 js如何清除定时器

window对象提供了两个方法来实现定时器的效果，　　分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时...

小灰灰/ 2020年06月01日 17:47/ 0 赞/ 858 阅读