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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php生成N个不重复的随机数实例
2013/11/12 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python daemon守护进程实现
2016/08/27 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python变量的存储原理详解
2019/07/10 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
struct与class的区别
2014/02/03 面试题
2019年.net常见面试问题
2012/02/12 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
高中生操行评语
2014/04/25 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2015年采购部工作总结
2015/04/23 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
pycharm debug 断点调试心得分享
2021/04/16 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫