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 相关文章推荐
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
Linux中如何用命令创建目录
2016/12/02 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
音乐之声观后感
2015/06/04 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS