js定时器(执行一次、重复执行)


Posted in Javascript onMarch 07, 2014

1,只执行一次的定时器

<script> 
//定时器 异步运行 
function hello(){ 
alert("hello"); 
} 
//使用方法名字执行方法 
var t1 = window.setTimeout(hello,1000); 
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 
window.clearTimeout(t1);//去掉定时器 
</script>

2,重复执行的定时器

<script> 
function hello(){ 
alert("hello"); 
} 
//重复执行某个方法 
var t1 = window.setInterval(hello,1000); 
var t2 = window.setInterval("hello()",3000); 
//去掉定时器的方法 
window.clearInterval(t1); 
</script>

备注:

如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。

在javascritp中,有两个关于定时器的专用函数,分别为:

1.倒计定时器:timename=setTimeout("function();",delaytime);
2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。

倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

用以指定在一段特定的时间后执行某段程序。

JS中定时执行,setTimeout和setInterval的区别,以及l解除方法

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("function",time) 设置一个超时对象

SetInterval为自动重复,setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
例1.表单触发或加载时,逐字输出字符串

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="word"></div><br/><br/>
</body>
</html>

 

例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
</body>
</html>

例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";
setTimeout("alert('十秒钟到!')",10000)
}
</script>
<body>
<div id="m"></div>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>

例4:倒计时定时跳转

<html>
<head>
  <base href="<%=basePath%>">
  <title>My JSP 'ds04.jsp' starting page</title>
  <span id="tiao">3</span>
  <a href="javascript:countDown"> </a>秒后自动跳转……
  <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
  <!--脚本开始-->
  <script language="javascript" type="">
function countDown(secs){
 tiao.innerText=secs;
 if(--secs>0)
  setTimeout("countDown("+secs+")",1000);
 }
 countDown(3);
 </script>
  <!--脚本结束-->
 </head>

例6:

<head> 
    <meta http-equiv="refresh" content="2;url='b.html'"> 
</head>

例7:

<script language="javascript" type="text/javascript">
 setTimeout("window.location.href='b.html'", 2000);
 //下面两个都可以用
 //setTimeout("javascript:location.href='b.html'", 2000);
 //setTimeout("window.location='b.html'", 2000);
</script>

例8:

<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
 var second = document.getElementByIdx_x('totalSecond').innerHTML;
 if(isNaN(second)){
  //……不是数字的处理方法
 }else{
  setInterval(function(){
   document.getElementByIdx_x('totalSecond').innerHTML = --second;
   if (second <= 0) {
    window.location = 'b.html';
   }
  }, 1000);
 } 
</script>
Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue实现微信分享功能
Nov 28 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 #Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 #Javascript
JS调试必备的5个debug技巧
Mar 07 #Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 #Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 #Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 #Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 #Javascript
You might like
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue获取dom元素注意事项
2017/12/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python中round函数保留两位小数的方法
2020/12/04 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
了解AppleTalk协议吗
2014/04/01 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
化学教育专业自荐信
2014/07/04 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
nginx容器方式反向代理实战
2022/04/18 Servers