JS中setInterval和setTimeout使用介紹

Web開發者發表於2011-12-25
JS

setTimeout和setInterval的相同處

setTimeout和setInteval 都是window物件的定時方法，它們語法基本上相同。它們都有兩個引數，一個是將要執行的程式碼字串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之後就將執行那段程式碼。

setTimeout和setInterval的區別

setTimeout方法是定時程式，也就是在什麼時間以後幹什麼。幹完了就拉倒。
setInterval方法則是表示間隔一定時間反覆執行某操作。
如果用setTimeout實現setInerval的功能，就需要在執行的程式中再定時呼叫自己才行。
如果要清除定時器則根據建立定時器時使用的方法呼叫不同的清除方法：
例如：timer=setTimeout('startShow()',2000);
clearTimeout(timer);
或者：timer=setInterval('startShow()',2000);
clearInterval(timer);

setTimeout和setInterval 使用例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setTimeout() 使用例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">
var initValue=0;
var timer=null;
function startShow()
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue).toString();
	timer=window.setTimeout("startShow()",2000);
}

function stop()
{
	window.clearTimeout(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="startShow();"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setInterval() 使用例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">
var initValue=0;
var timer=null;
function startShow()
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue).toString();
}
function stop()
{
	window.clearInterval(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="timer=setInterval('startShow()',2000)"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html>

向setTimeout、setInterval傳遞函式引數

1、採用字串形式
例如：timer=window.setTimeout("startShow("+id+")",2000)
這樣只能傳字串、數字，對傳遞object就無能為力了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setTimeout() 傳遞函式引數例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">
var initValue=0;
var timer=null;
function startShow(id)
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue+id).toString();
	timer=window.setTimeout("startShow("+id+")",2000);
}

function stop()
{
	window.clearTimeout(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="startShow(10);"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html>

2、匿名函式包裝
支援物件引數。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setTimeout() 傳遞函式引數例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">
var initValue=0;
var timer=null;
function startShow(id)
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue+id).toString();
	timer=window.setTimeout(function(){startShow(id)},2000);
}

function stop()
{
	window.clearTimeout(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="startShow(10);"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html>

3、定義返回無參函式的函式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setTimeout() 傳遞函式引數例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">
var initValue=0;
var timer=null;
function startShow(id)
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue+id).toString();
	timer=window.setTimeout(_startShow(id),2000);
}

function _startShow(id)
{
	return function() { startShow(id); }
}

function stop()
{
	window.clearTimeout(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="startShow(10);"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html>

4、修改setTimeout、setInterval
程式碼其實就很簡單，過載了一下window.setTimeout，用apply去回撥前面的function。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>setTimeout() 傳遞函式引數例子 - Web開發者 Admin10000.com </title>
<script type="text/javascript">

var _st = window.setTimeout;
window.setTimeout = function(fRef, mDelay) {
 if(typeof fRef == 'function'){
  var argu = Array.prototype.slice.call(arguments,2);
  var f = (function(){ fRef.apply(null, argu); });
  return _st(f, mDelay);
 }
 return _st(fRef,mDelay);
} 

var initValue=0;
var timer=null;
function startShow(id)
{
	var obj = document.getElementById("message");
	obj.innerHTML = obj.innerHTML + " " + (++initValue+id).toString();
	timer=window.setTimeout(startShow,2000,id);
}

function stop()
{
	window.clearTimeout(timer);
}
</script> 
</head> 
<body> 
<div id="message"></div>
<br/>
<input type="button" value="啟動" onclick="startShow(10);"/>
<input type="button" value="停止" onclick="stop();"/>
</body> 
</html>

相關文章