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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
微信小程序加载机制及运行机制图解
Nov 27 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 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程序设计中的MVC编程思想
2014/07/28 PHP
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python中__call__方法示例分析
2014/10/11 Python
使用python开发vim插件及心得分享
2014/11/04 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
利用python开发app实战的方法
2019/07/09 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python二元赋值实用技巧解析
2019/10/25 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
总经理岗位职责范本
2014/02/02 职场文书
花店创业计划书范文
2014/02/07 职场文书
档案信息化建设方案
2014/05/16 职场文书
教师考核材料
2014/05/21 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
解析Java异步之call future
2021/06/14 Java/Android
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS