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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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中的超全局变量
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python生成随机数组的方法小结
2017/04/15 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python 使用多属性来进行排序
2019/09/01 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
运动会主持词大全
2015/07/02 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android