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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
javascript history对象详解
Feb 09 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python中max函数用法实例分析
2015/07/17 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
领导党性分析材料
2014/02/15 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
《春晓》教学反思
2014/04/20 职场文书
质量负责人任命书
2014/06/06 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
MySQL Server层四个日志的实现
2022/03/31 MySQL