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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php 操作调试的方法
2012/07/12 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
五一劳动节活动记录
2014/03/23 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
小学中队委竞选稿
2015/11/20 职场文书
《草船借箭》教学反思
2016/02/23 职场文书