原文地址: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>
来源:https://www.cnblogs.com/AndrewXu/p/5037276.html