JavaScript setTimeout和setInterval的使用方法 说明


Posted in Javascript onMarch 25, 2010

不同的是setInterval会每隔指定的时间段就执行一次代码,具有重复性。而setTimeout只会调用后执行一次。
下面通过函数的建立和函的自动删除来深刻理解两个函数;
1.函数的建立
setTimeOut的建立:

showTime(); 
function showTime() 
{ 
var today = new Date(); 
alert("The time is: " + today.toString()); 
setTimeout("showTime()", 5000); 
}

调用函数后五秒钟才会执行一次showtime函数
setInterval的建立
setInterval("showTime()", 5000); 
function showTime() 
{ 
var today = new Date(); 
alert("The time is: " + today.toString()); 
}

总结:貌似两个函数的结果相似,其实不然第二个函数会反复的报时,直到该网页被关闭。
两个函数的消除:
setTimeout的消除使用
clearTimeout()函数;调用的实例:
var timeoutProcess = setTimeout("alert('GOAL!')", 3000); 
var stopGoalLink = document.getElementById("stopGoalLink"); 
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函数,参数为(目标;事件;调用的函数;是否冒泡) 
function stopGoal() 
{ 
clearTimeout(timeoutProcess); 
}

setInterval的消除
var timeoutProcess = setTimeout("alert('GOAL!')", 3000); 
var stopGoalLink = document.getElementById("stopGoalLink"); 
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函数,参数为(目标;事件;调用的函数;是否冒泡) 
function stopGoal() 
{ 
clearInterval(timeoutProcess); 
}
Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
JavaScript 学习初步 入门教程
Mar 25 #Javascript
ext 列表页面关于多行查询的办法
Mar 25 #Javascript
JS学习之一个简易的日历控件
Mar 24 #Javascript
javascript instanceof,typeof的区别
Mar 24 #Javascript
ExtJs使用IFrame的实现代码
Mar 24 #Javascript
JS 显示当前日期与时间的代码
Mar 24 #Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 #Javascript
You might like
php中删除、清空session的方式总结
2015/10/09 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
传智播客学习之java 反射
2009/11/22 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
如何在python中实现随机选择
2019/11/02 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
初任培训自我鉴定
2013/10/07 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
技术负责人任命书
2014/06/05 职场文书
银行转正自我鉴定
2014/09/29 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年药房工作总结
2015/04/25 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
四年级作文之说明文作文
2019/10/14 职场文书