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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
豆瓣网的jquery代码实例
Jun 15 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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上的memcache和memcached两个pecl库
2010/03/29 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
javascript 实现map集合
2015/04/03 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python装饰器初探(推荐)
2016/07/21 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python中的decorator的作用详解
2018/07/26 Python
Python 中的lambda函数介绍
2018/10/10 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
四好少年事迹材料
2014/01/12 职场文书
本科毕业生求职信
2014/06/15 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
60句有关成长的名言
2019/09/04 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python