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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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
php 数组的指针操作实现代码
2011/02/08 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
Javascript实现字数统计
2015/07/03 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python的launcher用法知识点总结
2020/08/07 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
个人自我鉴定写法
2013/11/30 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
初三新学期计划书
2014/05/03 职场文书
党的群众路线学习材料
2014/05/16 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
保留意见审计报告
2015/06/05 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python