• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

JS中setInterval和setTimeout使用介绍_js

JavaScript zuozedahai 3年前 (2018-06-21) 113次浏览 已收录 0个评论

setTimeout和setInterval的相同处

setTimeout和setInteval 都是window对象的定时方法,它们语法基本上相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

setTimeout和setInterval的区别

setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。
如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。
如果要清除定时器则根据创建定时器时使用的方法调用不同的清除方法:
例如:timer=setTimeout('startShow()',2000);
clearTimeout(timer);

http://www.gaodaima.com/51841.htmljs中setInterval和setTimeout使用介绍_js

或者: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>  

欢迎大家阅读《JS中setInterval和setTimeout使用介绍_js》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址