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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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生成静态页
2006/11/25 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
实用框架(iframe)操作代码
2014/10/23 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python实现队列的方法
2015/05/26 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
python如何求100以内的素数
2020/05/27 Python
Python对excel的基本操作方法
2021/02/18 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
工程采购员岗位职责
2014/03/09 职场文书
阳光体育活动总结
2014/04/30 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
体育教师研修感悟
2015/11/18 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技