首页 > 代码库 > 关于定时器的那些事!
关于定时器的那些事!
定时器有两种方法,分别是setInterval和setTimeout
一、创建定时器:setInterval() - 每隔指定的毫秒数不停地执行指定的代码。
语法:setInterval(code,time);
参数说明:
code为每隔指定的毫秒数要执行的函数或js代码
time是指定的毫秒数
实例:动态时钟
<div id="clock"></div>
setInterval(function(){
var today = new Date();
t = today.toLocaleTimeString();
document.getElementById("clock").innerHTML = t;
},1000);
二、清除定时器: clearInterval() -停止 setInterval() 方法执行的函数代码
要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量:
myClock = setInterval(fn,time);
clearInterval(myClock);
三、创建超时器 setTimeout() - 指定的毫秒数后执行指定的代码
语法:setTimeout(code,time)
参数说明:code:指定毫秒数后要执行的函数或js代码
time:指定毫秒数
注:如果setTimeout也可实现setInterval的效果(不常用)
<script type="text/javascript">
var t=0;
function timer(){
document.getElementById("txt").value=http://www.mamicode.com/t;
t++;
setTimeout("timer()",1000);
}
</script>
<body>
<p>setTimeout实现计时器效果</p>
<input type="text"id="txt">
<script>
timer();
</script>
</body>
实例:3秒后页面跳转到百度首页
setTimeout(function(){
location.href = "https://www.baidu.com";
},3000);
四、清除超时器 clearTimeout() - 停止 setTimeout() 方法执行的函数代码
要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量:
myTime = setTimeout(fn,time);
clearTimeout(myTime);
五、setInterval()和setTimeout的区别
前者会不停的循环执行,而后者只会执行一次
关于定时器的那些事!