js中的setInterval和setTimeout使用实例

 更新时间:2014年05月09日 10:23:06   作者:  
这篇文章主要介绍了javascript中的两个定时执行函数setInterval和setTimeout的用法,需要的朋友可以参考下

setInterval() 定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式。该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭。clearInterval() 函数的参数即 setInterval() 返回的 ID 值。

语法

setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

使用示例:

复制代码 代码如下:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=setInterval("clock()",50);
function clock(){
 var t=new Date();
 document.getElementById("clock").value=t;
}
</script>
</form>
<button onclick="window.clearInterval(int)">
停止 interval 事件</button>
</body>
</html>

setTimeout() 定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。

语法

setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数,以毫秒计。

提示:
(1)setTimeout() 虽然是只执行一次代码。但如果许要多次调用,除了使用 setInterval() 外还可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。
(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法对使用setTimeout()方法的取消。

使用示例:

复制代码 代码如下:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function timedMsg(){
 var t=setTimeout("alert('3 秒时间到!')",3000);
}
function timedMsgAways(){
 alert('3 秒时间到!');
 var t=setTimeout("timedMsgAways()",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="3 秒后警告" onClick="timedMsg()"><br />
<input type="button" value="循环 3 秒警告" onClick="timedMsgAways()">
</form>
</body>
</html>

对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

相关文章

  • 网页中CDATA标记的说明

    网页中CDATA标记的说明

    经常在网页html代码中看见这样的嵌入标签,但实际使用没有用过,特此在记录下。
    2010-09-09
  • js类式继承的具体实现方法

    js类式继承的具体实现方法

    这篇文章主要介绍了js类式继承的具体实现方法,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript入门教程(6) Window窗口对象

    JavaScript入门教程(6) Window窗口对象

    他是JavaScript中最大的对象,它描述的是一个浏览器窗口。一般要引用它的属性和方法时,不需要用“window.xxx”这种形式,而直接使用“xxx”。一个框架页面也是一个窗口。
    2009-01-01
  • JavaScript 之JS的组成与基本语法

    JavaScript 之JS的组成与基本语法

    这篇文章主要介绍了S的组成与基本语法,JS 主要是用来开发前端,但是也可以做别的,JS 现在是一个 "通用" 的编程语言,感兴趣的小伙伴可以参考阅读
    2023-04-04
  • js获取浏览器基本信息大全

    js获取浏览器基本信息大全

    本文整理汇总了js获取浏览器基本信息资料,非常的全面,也对IE及非IE浏览器之间的区别进行了分析,是篇非常不错的文章,这里推荐给大家,前端设计师们千万不要错过
    2014-11-11
  • 关于cookie的初识和运用(js和jq)

    关于cookie的初识和运用(js和jq)

    下面小编就为大家带来一篇关于cookie的初识和运用(js和jq)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-04-04
  • Javascript实例教程(19) 使用HoTMetal(7)

    Javascript实例教程(19) 使用HoTMetal(7)

    Javascript实例教程(19) 使用HoTMetal(7)...
    2006-12-12
  • 聊一聊JavaScript作用域和作用域链

    聊一聊JavaScript作用域和作用域链

    这篇文章主要和大家一起聊一聊JavaScript作用域和作用域链,什么是JavaScript作用域和作用域链,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • nodejs中exports与module.exports的区别详细介绍

    nodejs中exports与module.exports的区别详细介绍

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块接下来介绍创建过程,感兴趣的朋友可以参考下
    2013-01-01
  • 浅谈JavaScript事件的属性列表

    浅谈JavaScript事件的属性列表

    本文向大家简单介绍了javascript事件的属性列表,非常的详细,推荐给有相同需求的小伙伴们。
    2015-03-03

最新评论