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访问XML数据的实例
Dec 27 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
JavaScript验证知识整理
Mar 24 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 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 xml实例 留言本
2009/03/20 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
python动态性强类型用法实例
2015/05/09 Python
python 类详解及简单实例
2017/03/24 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
django2 快速安装指南分享
2018/01/05 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python实现多层感知器
2019/01/18 Python
Numpy之random函数使用学习
2019/01/29 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python中什么是面向对象
2020/06/11 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
中学生演讲稿
2014/04/26 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
小学生优秀评语
2014/12/29 职场文书
交警失职检讨书
2015/01/26 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python