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 相关文章推荐
读jQuery之十 事件模块概述
Jun 27 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
在vue项目中 实现定义全局变量 全局函数操作
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
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
jquery向后台提交数组的代码分析
2020/02/20 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python类和继承用法实例
2015/07/07 Python
python僵尸进程产生的原因
2017/07/21 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
详解flask入门模板引擎
2018/07/18 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python代码中怎么换行
2020/06/17 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
高中自我鉴定范文
2013/11/03 职场文书
关于逃课的检讨书
2014/01/23 职场文书
酒店节能降耗方案
2014/05/08 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
捐资助学感谢信
2015/01/21 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
Python道路车道线检测的实现
2021/06/27 Python
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Python制作春联的示例代码
2022/01/22 Python