javascript setTimeout和setInterval计时的区别详解


Posted in Javascript onJune 21, 2013

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

t=setTimeout('northsnow()',1000);
clearTimeout(t);
(2):
t=setInterval('northsnow()',1000);
clearInteval(t);
setTimeout()

语法
var t=setTimeout("javascript语句",毫秒);

第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。

实例
当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。

<html>
  <head>
<script type="text/javascript">
function timedMsg() {
 var t=setTimeout("alert('5 seconds!')",5000);
 }
</script>
  </head>
  <body>
    <form>
      <input type="button" value="运行计时!" onClick="timedMsg()">
    </form>
  </body>
</html>
 

setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
实例
<html>
<head>
  <meta charset="utf-8"/>
  <title>setInterval实例 - 新锐工作室</title>
</head>
<body>
<script language="javascript">
  function endo(){
    alert("你好");
  }
  window.setInterval('endo()',5000);
</script>
</form>
<p> (c) Endige.net </p>
</body>
</html>

传参方法
无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数, 而在 许多场合必须要带参数,这就需要想方法解决。例如对于函数hello(_name),它用于针对用户名显示欢
迎信息:
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
  alert("hello,"+_name);
}

这时,如果企图使用以下语句来使hello函数延迟3秒执行是不可行的:
window.setTimeout(hello(userName),3000);
这将使hello函数立即执行,并将返回值作为调用句柄传递给setTimeout函数,其结果并不是程序需要的。 而使用字符串形式可以达到想要的结果:
这里的字符串是一段JavaScript代码,其中的userName表示的是变量。 但这种写法不够直观,而且有些场合必须使用函数名,下面用一个小技巧来实现带参数函数的调用:
<script language="JavaScript" type="text/javascript">
<!--
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
  alert("hello,"+_name);
}
//创建一个函数,用于返回一个无参数函数
function _hello(_name){
  return function(){
    hello(_name);
  }
}
window.setTimeout(_hello(userName),3000);
//-->
</script>

这里定义了一个函数_hello,用于接收一个参数,并返回一个不带参数的函数,
在这个函数内部使用了外部函数的参数,从而对其调用,不需要使用参数。在 window.setTimeout函数中,使用_hello(userName)来返回一个不带参数的
函数句柄,从而实现了参数传递的功能。
A.当要执行的方法中不需要参数时
<script type=”text/javascript”> 
//循环执行,每隔3秒钟执行一次showalert() 
window.setInterval(showalert, 3000);
function showalert() {
  alert(“你好”); 
}
//定时执行,5秒后执行show()
window.setTimeout(show,5000);
function show() {
  alert(“Hello”);
}
</script>

B.当要执行的方法中需要参数时
<script type=”text/javascript”> 
//循环执行,每隔3秒钟执行一次 showalert()
window.setInterval(function(){ 
  showalert(“你好!”); 
}, 3000); 
function showalert(mess) { 
  alert(mess); 
} 
//定时执行,5秒后执行showalert()
window.setTimeout(function(){ 
  showalert(“Hello”);
},5000); 
</script>
Javascript 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
js简易namespace管理器 实例代码
Jun 21 #Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 #Javascript
js验证模型自我实现的具体方法
Jun 21 #Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 #Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 #Javascript
HTML5之lang属性与dir属性的详解
Jun 19 #Javascript
jQuery之ajax技术的详细介绍
Jun 19 #Javascript
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
Python中shapefile转换geojson的示例
2019/01/03 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
往来会计岗位职责
2013/12/19 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
产假请假条
2014/04/10 职场文书
新法人代表任命书
2014/06/06 职场文书
学习教师法的心得体会
2014/09/03 职场文书
新教师个人总结
2015/02/06 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
浅析MongoDB之安全认证
2021/06/26 MongoDB
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL