概述：
setTimeout：在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次；
setInterval：周期性地调用一个函数(function)或者执行一段代码，重复执行；
语法格式及示例：
setTimeout:
var timer=setTimeout(function(){
//要执行的代码
code
},delay);
* delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点
* code 是delay毫秒之后执行的函数
* timer 是该延时操作的ID, 此ID随后可以用来作为clearTimeout()方法的参数
Demo:广告页面的出现又自动消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setTimeout显示又消失</title>
<style type="text/css">
.demo{
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin:auto;
width: 435px;
height: 472px;
display: none;
background: url(888.jpg) no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo" id="demo"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById(‘demo‘);
setTimeout(function(){
oDiv.style[‘display‘]=‘inline-block‘;
setTimeout(function(){
oDiv.style[‘display‘]=‘none‘;
},3000);
},2000)
}
</script>
</body>
</html>
setInterval：
var timer=setTimeout(function(){
//要执行的代码
code
},delay);
*function将会被重复调用；
*timer 是该延时操作的ID, 此ID随后可以用来作为clearInterval()方法的参数；
*每隔delay(延迟时间)之后,上面代码就创建一个执行代码的定时器;
*当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中
*可以利用定时器制作一些动画
Demo：连续落下的圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rainning</title>
<style type="text/css">
.demo{width:50px; height:50px; border-radius:25px;background:#11cd6e; position:absolute; top:0px;}
</style>
</head>
<body>
<script type="text/javascript">
var str = ‘‘;
var len = 20;
var aDiv = document.getElementsByTagName(‘div‘);
var timer = null;
var num = 0;
for ( var i=0; i<len; i++ ) {
document.body.innerHTML += ‘<div class="demo" style="left:‘+ i*60 +‘px;"></div>‘;
}
document.onclick = function () {
clearInterval(timer);
timer= setInterval( function (){
doMove(aDiv[num]);
num ++;
if ( num === len ) {
clearInterval( timer );
}
}, 100 );
};
function doMove (obj) {
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, ‘top‘ )) + 23; // 下降单位
if ( speed > 500 ) {
speed = 500;
}
obj.style[‘top‘] = speed + ‘px‘;
if ( speed == 500 ) {
clearInterval( obj.timer );
}
}, 30);
}
//获取元素样式值
function getStyle(obj,attr){
return obj.currentStyle?currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script>
</body>
</html>
了解更多：
http://www.cnblogs.com/strick/p/3983904.html
http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html
http://www.cnblogs.com/tly0512/archive/2012/06/29/2568905.html
时间： 2024-10-12 00:31:47