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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php模板中出现空行解决方法
2011/03/08 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php中JSON的使用方法
2015/04/30 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python虚拟环境迁移方法
2019/01/03 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python sublime安装及配置过程详解
2020/06/29 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
北京青年观后感
2015/06/15 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python中的程序流程控制语句
2022/02/24 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android