JS中setInterval和setTimeout使用介绍

  • A+
所属分类：脚本语言

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>

QQ群： WEB开发者官方总群(196171896) 验证消息：Admin10000
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin