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 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
angular.js实现购物车功能
Oct 23 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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
PHP写MySQL数据 实现代码
2009/06/15 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
使用Python设计一个代码统计工具
2018/04/04 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
基于python的Paxos算法实现
2019/07/03 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
微观物理专业自荐信
2014/01/26 职场文书
个人自我评价范文
2014/02/05 职场文书
拓展训练激励口号
2014/06/17 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年物流工作总结
2014/11/25 职场文书