javascriptタイマー:setTimeoutとset Interval

4391 ワード

Set Interval

概要:
setTimeout:指定された遅延時間の後に関数を呼び出したり、コードセグメントを実行したりして、一回だけ実行します.
setInterval:関数を周期的に呼び出したり、コードの一部を実行したり、繰り返し実行したりします.

構文フォーマットおよび例:

setTimeout:

var timer=setTimeout(function(){
    //       
 code                  
},delay);

*delayは、遅延したミリ秒(一秒は1000ミリ秒)で、関数の呼び出しはこの遅延の後に発生します.しかし、実際の遅延時間は少し長いかもしれません.
＊コードは、delayミリ秒後に実行する関数です.
＊timerは、この遅延操作のIDであり、このIDはその後、clearTimeout()方法のパラメータとして使用することができる.

デモ:広告ページの出現は自動的に消えます.

デモンストレーションアドレス: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>

　　

set Interval:

var timer=setTimeout(function(){
    //        
  code                  
},delay);

*functionは再起動されます.
＊timerは、この遅延操作のIDであり、このIDはその後、clear Interval()方法のパラメータとして使用することができる.
*delay(遅延時間)毎に、上のコードは実行コードのタイマーを作成します.
*現在のタイマーコードが実行されている場合、後に続く最初のタイマーコードがキューに追加されます.実行待ちです.後のタイマーコードがキューに追加されません.
*タイマーを使ってアニメを作ることができます.

デモ:落ち続けた円

デモンストレーションアドレス: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 radioのvalueの関数[測定済み]を取得します.