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

admin · 发表于 2018-7-31 10:57:21

1，只执行一次的定时器

<script>
$ `5 s( f1 W$ ?" e, p J
//定时器异步运行
+ u) O, M# m' V" m6 }+ s) v
function hello(){
' W) j W$ h% p
alert("hello");
- \$ u2 M* X* Y, {
}
) K4 s: v2 J- k) a3 J( {
//使用方法名字执行方法
5 V$ U' s" G U
var t1 = window.setTimeout(hello,1000); $ Q: w6 r. j& C5 U
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
( I! _# b! d; ]1 T2 ?
window.clearTimeout(t1);//去掉定时器 \% J9 T4 A y0 k3 [" r; E" h
</script>

复制代码

2，重复执行的定时器

<script>
7 i; r/ C" P) p- D, }' _
function hello(){
+ n7 V$ B; |9 ]# k% H7 `1 Z
alert("hello"); 7 C" p& A' J3 M1 V1 w+ D% q
} 7 z3 h- C9 |! P, m
//重复执行某个方法
. Y' r( s7 B- j: L* W* s; p- n6 [
var t1 = window.setInterval(hello,1000); L! q" G! U* B
var t2 = window.setInterval("hello()",3000);
+ F' x) u+ a) m! G# G
//去掉定时器的方法
+ V* `8 U9 B# s9 B- M2 d
window.clearInterval(t1);
1 m4 i3 Q$ p# k' G% |
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime); B2 T2 g1 Q' C0 f5 k& g
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
3 v$ ^9 U% W# w; Y“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。- L% T' g" G5 ?, x
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
2 a/ q" O# [5 E* m4 t比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
( y% N1 V, E) r3 Z" {% E则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。2 U1 V% z7 X4 S& g
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。! b) @9 ]+ {; V8 M& }9 e" J
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
4 K3 e" S. X+ ~' @9 y, XsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
, X& h9 \/ R7 n8 n( K% }clearInterval(对象) 清除已设置的setInterval对象

略举两例。
. O9 }) `. @6 N5 y& A- J4 ~! ]例1.表单触发或加载时，逐字输出字符串

<html>
& F1 W) f$ G0 {. h
<head>4 i+ }! P# ^& S4 i% N
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
. H: t! u& z$ z2 c9 O, Q. ~
<title>无标题文档</title>! X, n4 V p# W
<script language="JavaScript" type="text/javascript">0 U3 z. Y- E' m
var str = "这个是测试用的范例文字";4 h/ a p. l7 n
var seq = 0;( f3 U# z) P3 Q
var second=1000; //间隔时间1秒钟
& L, t, `9 V& X; f
function scroll() {$ q: i7 L4 E, d
msg = str.substring(0, seq+1);& ~8 T# p% o) K" V% E: `1 I" n0 U
document.getElementByIdx_x_x('word').innerHTML = msg;
4 _0 K, E7 p3 o) t) }/ d
seq++;* I0 F% i' n2 {8 K
if (seq >= str.length) seq = 0;
! g+ B' N0 P( D4 X- Q& s8 n
}
& T( b3 J$ e! v: o
</script>5 S$ E( @7 T8 c7 i( X2 k9 D% c
</head>
9 J7 l9 @, M3 s* `2 g5 C0 a
<body onload="setInterval('scroll()',second)">/ x7 n# y9 [; N- [' D" Y8 S% U8 [5 T
<div id="word"></div><br/><br/>
$ |% G# [1 g/ }2 b% }' k$ b( v
</body>
/ `6 q& c" J- x9 l
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* K I. d9 A9 {) v* Q1 x, a! E
<html xmlns="http://www.w3.org/1999/xhtml">0 O- m2 M# r$ | c; l/ r
<head>' ?) L$ b6 o1 Z$ s5 z
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />0 x+ Y N8 S: i+ C, R
<title>无标题文档</title>* M; E* n5 T& Y& n
<script language="JavaScript" type="text/javascript">
- N/ ?+ m' X! |$ e i; G# M8 Q
var second=5000; //间隔时间5秒钟$ i; b; ?# I' x/ b/ @! l8 E
var c=0;
4 j; q3 E% ^; ~/ z8 t
function scroll() {
. {: L1 `& Q. ^( _3 m0 N7 J1 ~/ V3 K% E
c++;
" I: V' r# ?& M. r
if ("b" == document.activeElement.id) {; n/ _6 c& k8 K/ s
var str="定时检查第<b> "+c+" </b>次<br/>";
* `$ o; G8 g B
if(document.getElementByIdx_x_x('b').value!=""){
, o" t K* t: U4 T! y4 J) g- ]
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";* g9 R& ^7 s7 K9 j
}4 N8 y N9 f( \* g
document.getElementByIdx_x_x('word').innerHTML = str;; P' R9 x. F. d! E/ i
}( V. K1 S* r2 G P# y) g) T
}3 C. w2 \( ~5 Y# g/ b
</script>9 @ L& C# D/ W l7 n; I+ O
</head> [! h/ L8 \# r s% |
<body>
1 l5 [# h$ O7 L3 n: A
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
0 Q x$ D5 o3 w8 o4 o
<div id="word"></div><br/><br/>
6 Y7 I& Y3 \+ y' n) t1 N% N
</body>7 e2 J' G3 u: U. e
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
. t/ a# t; S' O! v: U4 z
<head>
& o( }7 n1 F/ x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 n: b7 k' O/ G
<script language="javascript">9 j* r3 M4 O8 ^$ g# B8 a5 ?3 S4 Y
function count() {; i* ?) _2 |, |: j6 z
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' X9 c& S( w! O$ m( g3 A; o
setTimeout("alert('十秒钟到！')",10000)
0 y3 q I6 @! T7 j; o8 M) R
}% S' Z: Y9 k6 a# Z
</script>$ j& w0 T8 S2 ?2 D7 W5 E- Y
<body>
# M& H, G) X( w6 S M5 m3 c
<div id="m"></div>" x; Q/ h* ]# I# ]" K3 E- g
<input TYPE="button" value=" 计时开始" onclick="count()">6 [# S0 I. c7 d/ O% }- a0 q
</body>3 v& |2 h/ P* w+ \' L4 z+ i
</html>

复制代码

例4:倒计时定时跳转

<html>
" r5 ~( R; h" f$ ^
<head>, G- Y- F8 S2 T- ]! H1 q3 F
<base href="<%=basePath%>">
5 c0 e# S$ R) m" ~
<title>My JSP 'ds04.jsp' starting page</title>
) ~" v& J3 E7 }
<span id="tiao">3</span>
3 X1 f( [' A1 f1 a
<a href="javascript:countDown"> </a>秒后自动跳转……
4 T. j2 u; X9 _& a
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
/ e: h' G: H- t9 W2 T
$ |+ y* s* D' J) x
<script language="javascript" type="">1 F2 \7 m" P. Y8 y
function countDown(secs){
* g) I+ P2 o3 `, r
tiao.innerText=secs;- R, D5 I6 K# k9 x: l) a! x Z- B
if(--secs>0)
8 ^! F5 J4 `$ L' U; @& X
setTimeout("countDown("+secs+")",1000);( F9 Q5 o8 e3 H
}
+ R% T7 l' z- G
countDown(3);+ E. t; b* t f1 }; C; ]7 P7 G% F
</script>% D2 \$ J( T m& G
6 B: R& b9 U' C+ B
</head>

复制代码

例6:

<head> * I7 }1 N. \* n9 b4 F
<meta http-equiv="refresh" content="2;url='b.html'">
' r7 B: d/ e1 a- n8 H1 I& U, x9 a7 k
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
2 z. N; q9 h( E* M; E- Y8 X/ A
setTimeout("window.location.href='b.html'", 2000);$ X! \' g5 N- p- [! M
//下面两个都可以用
; I" X) o( _7 X6 n/ y5 V; b2 x( q
//setTimeout("javascript:location.href='b.html'", 2000);% t$ |$ O" J+ U; y! \$ x
//setTimeout("window.location='b.html'", 2000);
/ l% s; H9 z3 Z+ N+ P2 d
</script>

复制代码

例8:

<span id="totalSecond">2</span>
6 V& ], i! T T3 [8 C. S2 t
<script language="javascript" type="text/javascript">+ c# t* h. ~& z i: M! \- _
var second = document.getElementByIdx_x('totalSecond').innerHTML;- |) O+ {$ \8 u) w; u0 z
if(isNaN(second)){
, B, Q. a: u& ^8 R* y+ G
//……不是数字的处理方法; y$ b9 q6 i' K
}else{
( G+ s( r# \8 |6 K# Q, g
setInterval(function(){7 L2 R* M8 J A _" N
document.getElementByIdx_x('totalSecond').innerHTML = --second;6 K0 G% T7 ?" S" c2 c3 B- L
if (second <= 0) {0 l" [) W2 B6 T! U q1 G
window.location = 'b.html';( m# v4 q$ O9 Y: z* w3 L, s
}
$ Z" T( O' }0 p s% P
}, 1000);4 |- S2 g6 Q/ M* m
}
o# i9 }* g; Z' }& b
</script>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[js学习资料] js定时器(执行一次、重复执行)