javascript定时器:setTimeout与setInterval

概述：

setTimeout：在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次；

setInterval：周期性地调用一个函数(function)或者执行一段代码，重复执行；

 

语法格式及示例：

 

setTimeout:

?
1
2
3
4
var timer=setTimeout(function(){
    //要执行的代码
 code                 
},delay);

* delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点

* code  是delay毫秒之后执行的函数

* timer 是该延时操作的ID, 此ID随后可以用来作为clearTimeout()方法的参数

 

 Demo:广告页面的出现又自动消失

 

 演示地址：http://codepen.io/anon/pen/aOJObO

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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：

 

?
1
2
3
4
var timer=setTimeout(function(){
    //要执行的代码 
  code                 
},delay);

*function将会被重复调用；

*timer 是该延时操作的ID, 此ID随后可以用来作为clearInterval()方法的参数；

*每隔delay(延迟时间)之后,上面代码就创建一个执行代码的定时器;

*当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中

*可以利用定时器制作一些动画

 

Demo：连续落下的圆

 

演示地址：http://codepen.io/anon/pen/aOJOdd

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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

 

 

posted @   Me-Kevin  阅读(532)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛