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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
Jquery ajax基础教程
Nov 20 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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对象Object的概念 介绍
2012/06/14 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
javascript 面向对象继承
2009/11/26 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
单位工作证明书格式
2014/10/04 职场文书
世界遗产导游词
2015/02/13 职场文书
呐喊读书笔记
2015/06/30 职场文书