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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
element 动态合并表格的步骤
Dec 31 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
cakephp常见知识点汇总
2017/02/24 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js选项卡的制作方法
2017/01/23 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
python传递参数方式小结
2015/04/17 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Python any()函数的使用方法
2019/10/28 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
师德先进个人材料
2014/12/20 职场文书
公司介绍信范文
2015/01/31 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
护理培训心得体会
2016/01/22 职场文书
python实现三次密码验证的示例
2021/04/29 Python
详解Python常用的魔法方法
2021/06/03 Python
DQL数据查询语句使用示例
2022/12/24 MySQL