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 01 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python入门篇之对象类型
2014/10/17 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python解析nginx日志文件
2015/05/11 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python进程间通信用法实例
2015/06/04 Python
Python的时间模块datetime详解
2017/04/17 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python多线程的退出控制实现
2020/08/10 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
护理中职生求职信范文
2014/02/24 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android