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 解析url的search方法
Feb 09 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
原生js实现简单轮播图
Oct 26 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php引用传值实例详解学习
2013/11/06 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
Python日期操作学习笔记
2008/10/07 Python
Python 连连看连接算法
2008/11/22 Python
Python中的filter()函数的用法
2015/04/27 Python
基于Django用户认证系统详解
2018/02/21 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
linux面试相关问题
2012/08/11 面试题
村捐赠仪式答谢词
2014/01/21 职场文书
领导班子对照检查材料
2014/09/22 职场文书
律师授权委托书范本
2014/10/07 职场文书
学生检讨书
2015/01/27 职场文书
新郎结婚感言
2015/07/31 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
五年级作文之想象作文
2019/10/30 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers