javascript定时器:setTimeout与setInterval
概述:
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
javascript定时器:setTimeout与setInterval的更多相关文章
- Javascript的setTimeOut()和setInterval()的定时器用法
Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...
- Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...
- JS 定时器 setTimeout 与 setInterval 的区别和用法
定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- 有关定时器setTimeout()、setInterval()详解
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
- 高级定时器-setTimeout()、setInterval()、链式setTimeout()
使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...
- JavaScript的setTimeout和setInterval的深入理解
发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...
- Javascript中setTimeout和setInterval的区别和使用
在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...
随机推荐
- Flex中的折线图
1.问题背景 在Flex中,制作一个折线图.而且给折线图的横轴和纵轴进行样式设置,详细实现过程例如以下: 2.实现实例 (1)设置横轴样式和数据绑定 <mx:horizontalAxis> ...
- arcpagelistarclist列表分页
arcpagelistarclist列表分页 (DedeCMS 5.6) 名称:arcpagelist 功能:通过制定arclist的pagesize及tagid属性,配合arcpagelist标签进 ...
- Ubuntu Wpa wifi connection
最近做一个项目,需要做一个WIFI连接模块,这几天都在折腾,终于,今天终于是连上网络了,只不过连网的过程有点慢,还有一些缺点,先写下来以备忘记. 1.环境建立: sudo apt-get instal ...
- Python代码分析工具之dis模块
转自:http://hi.baidu.com/tinyweb/item/923d012e8146d00872863ec0 ,格式调整过. 代码分析不是一个新的话题,代码分析重要性的判断比较主观,不同 ...
- JS笔记-常见函数与问题
1.请给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组. Array.prototype.distinct = functi ...
- Red Hat Enterprise Linux x86-64 上安装 oracle 11gR2
一.以root用户登录 二.安装依赖包 #rpm -qa | grep 包名 ----查看包 binutils-2.20.51.0.2-5.11.el6 (x86_64) ...
- Swift 数组、字典
import Foundation // 数组 var arr = [,2.3] var arr1 = [] print(arr) // 字典 var dict = ["] // 添加新项 ...
- 关于zMPLS的设计解析
zMPLS是一个关于mpls标准实现的开源软件,它起源于2002年6月份,项目终止于2006年,目前它已经可以支持ipv6,ipv4,ldp,cr-ldp,rsvp,rsvp-te等MPLS协议簇.该 ...
- js运算符的优先级
自上向下优先级降低 运算符 描述 . [] () 字段访问.数组下标.函数调用以及表达式分组 ++ -- - ~ ! delete new typeof void 一元运算符.返回数据类型.对象创建. ...
- activiti 5.17 流程图中文乱码问题
1. 流程图中任务中的中文乱码显示问题. 解决方法:设置processEngineConfiguration中的两个字体属性,例如: <bean id="processEngine ...