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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
node+vue实现文件上传功能
May 28 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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 如何向 MySQL 发送数据
2006/10/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
php格式化json函数示例代码
2016/05/12 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
js实现一个简易计算器
2020/03/30 Javascript
github配置使用指南
2014/11/18 Python
python append、extend与insert的区别
2016/10/13 Python
Python遍历pandas数据方法总结
2018/02/09 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python多线程下信号处理程序示例
2019/05/31 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
pytorch中index_select()的用法详解
2021/01/06 Python
本科毕业生应聘自荐信范文
2014/06/26 职场文书
单位接收证明格式
2015/06/18 职场文书
教师读书活动心得体会
2016/01/14 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle