js计数器方法setInterval()、clearInterval()、setTimeout()和clearTimeout()

Redis缓存师
• 阅读 52663
方法 描述
setInterval 周期性地调用一个函数(function)或者执行一段代码。
clearInterval 取消掉用setInterval设置的重复执行动作。
setTimeout 在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。

setInterval()

window.setInterval()方法,周期性地调用一个函数(function)或者执行一段代码。

语法

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

详解

intervalID 是此重复操作的唯一辨识符,可以作为参数传给clearInterval()。  
func 是你想要重复调用的函数。  
code 是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的,不推荐的原因和eval()一样)。  
delay 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。  

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段)。

例子

jssetInterval(function(){
    console.log("log")
},1000)

clearInterval()

window.clearInterval() 取消掉用setInterval设置的重复执行动作.

语法

window.clearInterval(intervalID)

详解

在指定的延迟时间之后调用一个函数或者执行一个代码片段。  
intervalID是你想要取消的重复动作的ID,这个ID是个整数,是由setInterval()返回的。 

例子

jsvar pageTimer = {} ; //定义计算器全局变量
//赋值模拟
pageTimer["timer1"] = setInterval(function(){},2000);
pageTimer["timer2"] = setInterval(function(){},2000);
//全部清除方法
for(var each in pageTimer){
    clearInterval(pageTimer[each]);
}
js// 暴力清除
for(var i = 1; i < 1000; i++) {
    clearInterval(i);
}

分析:实际上暴力清除的方式是不可取的,在不得已情况下才使用,在IE下,定时器返回值在IE下面是8位数字如:248147094,并且起始值不能确定,而Chrome和firefox下是从1开始的个位数字,一般项目还是建议第一种,并且第一种的扩展性也好,比如可以做个方法,清除除了指定定时器之外的所有定时器。

setTimeout()

在指定的延迟时间之后调用一个函数或者执行一个代码片段。
window.setTimeout()

语法

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

详解

* timeoutID 是该延时操作的数字ID, 此ID随后可以用来作为window.clearTimeout方法的参数。
* func 是你想要在delay毫秒之后执行的函数。
* code 在第二种语法,是指你想要在delay毫秒之后执行的代码 (使用该语法是不推荐的, 不推荐的原因和eval()一样)。 
* delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点,查看下面的备注。

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段)。

备注

你可以使用 window.clearTimeout()来取消延迟操作。
如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用window.setInterval()。

例子

js// 推荐
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 不推荐
window.setTimeout("alert("Hello World!");", 500);

clearTimeout()

window.clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法

clearTimeout(id_of_settimeout)

详解

参数 描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

实例

jsvar c=0
var t
function timedCount(){
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
}
function stopCount(){
    clearTimeout(t)
}
点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript时间
一、前言setTimeout(function,milliseconds)在等待指定的毫秒数后执行函数。setInterval(function,milliseconds)setTimeout()相同,但会重复执行。二、时间事件窗口对象允许在指定的时间间隔执行代码。时间间隔称为定时事件。1\.setTimeout()方法window.set
Wesley13 Wesley13
3年前
java RSA算法的性能记录
环境JavaHotSpot(TM)64BitServerVM1.7.0\_05x86\_64加密<table<tr<td内容长度</td<tdkeySize</td<td耗时(微秒)</td</tr<tr<td32</td<td512</td<td87</td</tr<tr<td
红烧土豆泥 红烧土豆泥
4年前
Java的数值数据类型以及命名规范
一、Java中的数值数据类型<table<tbody<tr<tdwidth"75"valign"top"style"wordbreak:breakall;"<spanstyle"backgroundcolor:rgb(255,254,213);"类型名<br</span</td<tdwidth"299
DevOpSec DevOpSec
4年前
Linux主机安全配置
1.安全配置规范1.身份鉴别1.账号检查<tableborder"1"cellspacing"0"style"width:426.1pt;"<tbody<tr<tdstyle"width:113.4pt;"<pstyle"marginleft:0pt;"<strong<strong安全配置编号
Stella981 Stella981
3年前
Jira 使用手册
<tablestyle"width:100%;margin:200px0300px0;"<tr<thDate</th<thRevisionversion</th<thDescription</th<thauthor</th</tr<tr<td20180614</td<tdV1.0.0</td
Stella981 Stella981
3年前
Bootstrap学习笔记
1.Table:table,tablebordered,table,tablehover,tablecondensed,2.tr,td:active,success,warning,danger,info3.Form:formgroupformcontrol,forminline,formhorizontal,4.
Wesley13 Wesley13
3年前
2020软件工程作业03
<styletable{width:100%;/\表格宽度\/margin:auto;/\外边距\/emptycells:show;/\单元格无内容依旧绘制边框\/fontsize:18px;}table,th,td{border:2pxsolidpink;}li{fontsize:1
Wesley13 Wesley13
3年前
ES6部分特性学习
/testes6@authorsYourName(you@example.org)@date2017121519:29:39@version$Id$///由于学习vuerouter需要,学学ES6;在babel中文网看到tr
Wesley13 Wesley13
3年前
Java 日期与时间
Java的日期Java没有内置的日期类,但可以导入java.time包,这个包中包含了许多类,可用于处理日期和时间。例如:<table<tbody<tr<thstyle"width:25%"Java类</th<thstyle"width:75%"描述</th</tr<tr<td<code
京东云开发者 京东云开发者
11个月前
js基础之setTimeout与setInterval原理分析
setTimeout与setInterval概述setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用。前者的主要思想是通过一个定时器,让函数在计时结束后再执行;后者则是每隔一定的时间,
Redis缓存师
Redis缓存师
Lv1
夜闻归雁生乡思,病入新年感物华。
文章
4
粉丝
0
获赞
0