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 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
浅析javascript的return语句
Dec 15 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 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
五个PHP程序员工具
2008/05/26 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP防盗链代码实例
2014/08/27 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PDO::prepare讲解
2019/01/29 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于pip install django失败时的解决方法
2018/06/12 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
结婚幸福感言
2015/08/01 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang