概述：

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

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

语法格式及示例：

setTimeout:

var timer=setTimeout(function(){

    //要执行的代码

 code

},delay);

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

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

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

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

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

<!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：连续落下的圆

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

<!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的更多相关文章

  1. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  2. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  3. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  4. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  5. 有关定时器setTimeout()、setInterval()详解

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...

  6. JavaScript 关于setTimeout与setInterval的小研究

    说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...

  7. 高级定时器-setTimeout()、setInterval()、链式setTimeout()

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...

  8. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  9. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

随机推荐

  1. 《Java虚拟机原理图解》1.4 class文件里的字段表集合--field字段在class文件里是如何组织的

    0.前言 了解JVM虚拟机原理是每个Java程序猿修炼的必经之路.可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描写 ...

  2. mysql索引简单介绍

    索引从本质上来说也是一种表,这样的表存储被列为索引的列项值和指向真正完整记录的指针.索引对用户透明.仅仅被数据库引擎用来加速检索真实记录.有索引的表.insert和update操作会耗费很多其它时间而 ...

  3. FIR滤波器设计

    FIR滤波器的优越性: 相位对应为严格的线性,不存在延迟失真,仅仅有固定的时间延迟: 因为不存在稳定性问题,设计相对简单: 仅仅包括实数算法,不涉及复数算法,不须要递推运算,长度为M,阶数为M-1,计 ...

  4. Android获取屏幕分辨率及DisplayMetrics简介

    Android 可设置为随着窗口大小调整缩放比例,但即便如此,手机程序设计人员还是必须知道手机屏幕的边界,以避免缩放造成的布局变形问题. 手机的分辨率信息是手机的一项重要信息,很好的是,Android ...

  5. 如何用Github的gh-pages分支展示自己的项目

    很多新同学觉得github不就是一个代码托管所吗,如何能展示项目呢?其实完全可以借助Github的gh-pages打造出自己的一个作品集,无论是对自己的提升整合还是日后的面试都大有裨益. 前置准备 G ...

  6. window成员和document成员

    输出浏览器成员和DOM成员(以下为safari浏览器测试)(浏览器不同对象成员有差异) window成员 <script type="text/javascript"> ...

  7. Android系统中长按事件的实现机制解析

    在Android的触摸消息中,已经实现了三种监测,它们分别是 1)pre-pressed:对应的语义是用户轻触(tap)了屏幕 2)pressed:对应的语义是用户点击(press)了屏幕 3)lon ...

  8. jdbc 获取connection 对象的三种方式

    获取数据库连接方法一:驱动实现类 //创建mysql的Driver对象 Driver driver=new com.mysql.jdbc.Driver(); //jdbc url 定位一个数据库: S ...

  9. Struts2：ValueStack

    一.ValueStack     1 .ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用       ...

  10. java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点

    1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...