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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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 array_unique之后json_encode需要注意
2011/01/02 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
生日庆典策划方案
2014/06/02 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
具结保证书
2015/01/17 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers