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 相关文章推荐
JS:window.onload的使用介绍
Nov 13 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js style动态设置table高度
Oct 21 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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/06/14 PHP
session 加入redis的实现代码
2016/07/15 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python3.6的venv模块使用详解
2018/08/01 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Django多数据库的实现过程详解
2019/08/01 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
如何在pycharm中安装第三方包
2020/10/27 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
港湾网络笔试题
2014/04/19 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
大学毕业寄语大全
2014/04/10 职场文书
消防工作实施方案
2014/06/09 职场文书
安全目标责任书
2014/07/22 职场文书
求职自荐信怎么写
2015/03/04 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书