javascript定時器:setTimeout與setInterval

時間 2019-11-21

標籤 javascript 定時器 settimeout setinterval 欄目 JavaScript 简体版

原文原文鏈接

_概述：javascript

setTimeout：在指定的延遲時間以後調用一個函數或者執行一個代碼片斷,只執行一次；css

setInterval：週期性地調用一個函數(function)或者執行一段代碼，重複執行；html

語法格式及示例：java

setTimeout:

var timer=setTimeout(function(){
    //要執行的代碼 
 code                  
},delay);

* delay 是延遲的毫秒數 (一秒等於1000毫秒),函數的調用會在該延遲以後發生.可是實際的延遲時間可能會稍長一點函數

* code 是delay毫秒以後執行的函數動畫

* timer 是該延時操做的ID, 此ID隨後能夠用來做爲clearTimeout()方法的參數url

Demo:廣告頁面的出現又自動消失spa

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

<!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：htm

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