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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
咖啡的种类和口感
2021/03/03 新手入门
坏狼php学习 计数器实例代码
2008/06/15 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python笔记(2)
2012/10/24 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python实现多属性排序的方法
2018/12/05 Python
Python数据可视化之画图
2019/01/15 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
什么是规则表达式
2012/05/03 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
车间统计员岗位职责
2014/01/05 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
2014年大学生工作总结
2014/11/20 职场文书
部队2015年终工作总结
2015/04/02 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers