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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
Python的函数的一些高阶特性
2015/04/27 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
餐饮业员工工作决心书
2014/03/11 职场文书
小学生家长寄语
2014/04/02 职场文书
就业协议书
2014/09/12 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
js 实现验证码输入框示例详解
2022/09/23 Javascript