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 相关文章推荐
js实现收缩菜单效果实例代码
Oct 30 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
js轮播图代码分享
Jul 14 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
第十三节 对象串行化 [13]
2006/10/09 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
DOM 高级编程
2015/05/06 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Python实现屏幕截图的两种方式
2018/02/05 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
什么是Python中的匿名函数
2020/06/02 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
环保守法证明
2015/06/24 职场文书
《观潮》教学反思
2016/02/17 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL