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插件tipswindown与hintbox冲突
Nov 05 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
一个可复用的vue分页组件
May 15 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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 过滤危险html代码
2009/06/29 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python创建进程fork用法
2015/06/04 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Sanic框架流式传输操作示例
2018/07/18 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Django实现celery定时任务过程解析
2020/04/21 Python
详解python变量与数据类型
2020/08/25 Python
python中封包建立过程实例
2021/02/18 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
.net面试题
2016/09/17 面试题
超市店庆活动方案
2014/08/31 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL