龙都娱乐»JavaScript»JS中setInterval和setTimeout使用介绍

JS中setInterval和setTimeout使用介绍

来源:Web龙都娱乐 发布时间:2011-12-25 阅读次数:

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龙都娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
龙都娱乐