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 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript常用函数(2)
Nov 05 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Javascript的this用法
2017/01/16 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
作文评语集锦大全
2014/04/23 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android