js中的setInterval和setTimeout使用实例


Posted in Javascript onMay 09, 2014

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。

Javascript 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
js编写三级联动简单案例
Dec 21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
js获取 type=radio 值的方法
May 09 #Javascript
js实现的点击数量加一可操作数据库
May 09 #Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
javascript字母大小写转换的4个函数详解
May 09 #Javascript
You might like
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python 类的特殊成员解析
2018/06/20 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python-numpy-指数分布实例详解
2019/12/07 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
会计毕业生自我鉴定
2013/11/04 职场文书
党员违纪检讨书
2014/02/18 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
人才市场接收函
2015/01/30 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis