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遍历数组与筛选数组的方法
Nov 05 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python中list循环语句用法实例
2014/11/10 Python
推荐11个实用Python库
2015/01/23 Python
Python3 Random模块代码详解
2017/12/04 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
幼儿体育课教学反思
2016/02/16 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python