setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法
原文地址:http://caibaojian.com/setinterval-settimeout.html
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 一段).
示例
例1:基本用法
var intervalID = window.setInterval(animate, 500);
例2:两种颜色的切换
下面的例子里会每隔一秒就调用函数flashtext()
一次,直至你通过按下Stop按钮来清除本次重复操作的唯一辨识符intervalID。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>setInterval/clearInterval example</title>
<script type="text/javascript">
var nIntervId;
function changeColor() {
nIntervId = setInterval(flashText, 500);
}
function flashText() {
var oElem = document.getElementById("my_box");
oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}
function stopTextColor() {
clearInterval(nIntervId);
}
</script>
</head>
<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>
window.clearInterval()方法
概述
取消掉用setInterval
设置的重复执行动作.
语法
window.clearInterval(intervalID)
intervalID
是你想要取消的重复动作的ID,这个ID是个整数,是由setInterval()返回的
.
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()
.
传递字符串字面量
向setTimeout()传递一个字符串而不是函数会遭受到与使用
eval一样的风险.
// 推荐
window.setTimeout(function() {
alert("Hello World!");
}, 500);
// 不推荐
window.setTimeout("alert("Hello World!");", 500);
字符串会在全局作用域内被解释执行,所以当setTimeout()
函数执行完毕后,字符串中的变量不可用.
setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().
<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<p>点击按钮查看效果(2s后弹出): <input type="button" value="setTimeout" /> <input type="button" value="clearTimeout" /></p>
<p>点击按钮查看效果(每2s弹出):<input type="button" value="setInterval" /> <input type="button" value="clearInterval" /></p>
<div id="ul1">
<input type="text" id="clock" size="35"/>
<button onclick="window.clearInterval(c)">stop Interval</button>
</div>
<script type="text/javascript">
var c = self.setInterval("clock()",50);
function clock(){
var t = new Date();
document.getElementById("clock").value=t;
}
var timeout=function(){
alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可停止执行!')
}
var interval=function(){
alert('每2s循环弹出,直至clearInterval或关闭窗口!')
}
var input=document.getElementsByTagName('input');
console.log(input.length);
var clearTimeoutFun=null;
var clearIntervalFun=null; input[0].onclick=function(){
clearTimeoutFun=setTimeout(timeout,2000);
}
input[1].onclick=function(){
clearTimeout(clearTimeoutFun);
}
input[2].onclick=function(){
clearIntervalFun=setInterval(interval,2000);
}
input[3].onclick=function(){
clearInterval(clearIntervalFun);
}
</script>
</body>
</html>
setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法的更多相关文章
- setInterval()、clearInterval()、setTimeout()和clearTimeout() js计数器方法(还有第三个参数)
用法是会用,但是之前一直以为接函数的 var a = setInterval(function(){},1000) 比如a是函数名,最近才发现它是一个ID, var intervalID = wind ...
- JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()
(PS:JavaScript 一个设定的时间间隔之后来执行代码,我们称之为计时事件.) JavaScript 计时事件 通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码 ...
- js-定时任务setInterval,setTimeout,clearInterval,clearTimeout
setInterval()循环执行相应的方法 <script type="text/javascript"> setInterval("myInterval( ...
- JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)
1.setTimeout().clearTimeout(var param) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次 clearTimeout() 方法可取 ...
- JS中setInterval、setTimeout不能传递带参数的函数的解决方法
setInterval 和 setTimeout 这两个函数比较好用,但会遇到比如说我隔个几秒后要执行的函数是带参数的,这种情况怎么办?可以用匿名函数包装处理 //不带参数的函数 function t ...
- JS里设定延时:js中SetInterval与setTimeout用法
js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...
- js中setInterval与setTimeout用法
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var ...
- js中setInterval与setTimeout用法 实现实时刷新每秒刷新
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
随机推荐
- struts2中<s:select/>标签的运用详解
<s:select list="smsTypes" listKey="SmsTypeId" listValue="SmsTypeName&quo ...
- vector容器
vector<int> ivec; vector<Sales_item> Sales_vec; 和其他变量定义一样,定义 vector 对象要指定类型和一个变量的列表.上 面的 ...
- Hibernate学习笔记-Hibernate HQL查询
Session是持久层操作的基础,相当于JDBC中的Connection,通过Session会话来保存.更新.查找数据.session是Hibernate运作的中心,对象的生命周期.事务的管理.数据库 ...
- Java学习笔记--对象克隆
转自:Edward_qing_Lee 的专栏 http://blog.csdn.net/edward_qing_lee/article/details/8249102 一.java 方法参数 理解: ...
- Selenium2Library关键字
对Selenium2Library关键字的整理和翻译.英文不好,仅供参考. 1.Add Cookie [ name | value | path=None | domain=None | secure ...
- (转)Oracle Data Guard配置
data guard配置的条件1.在主库和从库的所有机器上必须安装同一个版本的Oracle企业版.2.主库必须运行在归档模式下.3.主库和从库的操作系统必须一样(允许版本不同),从库可以使用与主库不同 ...
- cf Sereja and Array
http://codeforces.com/contest/315/problem/B #include <cstdio> #include <cstring> #includ ...
- 解决比较Oracle中CLOB字段问题
解决比较Oracle中CLOB字段问题 Oracle中CLOB和BLOB字段虽说在开发中满足了存放超大内容的要求,但是在一些简单使用中确频频带来麻烦.CLOB中存放的是指针,并不能直接取到实际值. ...
- poj:2992 因子数量
题意: 求 组合数c(n,k)的因子数量 由算术基本定理很容易求得,不过第一次却T了,加了好多预处理,o1查询,才过 #include <iostream> #include <st ...
- 【剑指offer】面试题41:和为 s 的两个数字 VS 和为 s 的连续正数序列
题目: 输出所有和为S的连续正数序列.序列内按照从小至大的顺序,序列间按照开始数字从小到大的顺序 思路: small代表序列最小数字,large代表序列最大数字.初始化small为1,large为2. ...