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

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

1，只执行一次的定时器

<script> a: L5 ]: V6 T$ g2 a
//定时器异步运行 4 `7 U) M3 M! e9 q
function hello(){
6 [- v$ m; ^7 [; h/ I
alert("hello");
1 H& p% w' d# o3 K; {' U5 y! h
}
9 U( b" N6 s& L5 {/ Z
//使用方法名字执行方法 # B6 i3 \* V/ J6 ~. x
var t1 = window.setTimeout(hello,1000); T+ z) H7 i4 ^
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
' Y) y8 G3 z0 x5 a" P2 o) w
window.clearTimeout(t1);//去掉定时器
* h+ i6 v) k, L. K$ z) K
</script>

复制代码

2，重复执行的定时器

<script> 9 j- j6 `: }: |
function hello(){ ' K! ?& _. N5 v$ {& {$ _
alert("hello");
4 q) p8 [, Q8 {, h4 b9 X/ @
}
$ H, K" C2 m$ j7 ^
//重复执行某个方法
( h b; Q3 n: l5 ]
var t1 = window.setInterval(hello,1000); $ m! k0 `* K/ c
var t2 = window.setInterval("hello()",3000); : h! B* P" J2 C6 d+ Z4 h1 ~
//去掉定时器的方法
8 E" }7 h6 r8 ?0 A9 y
window.clearInterval(t1); 8 K, B" ?6 g- N/ X2 l
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);3 a- Z" V9 Y3 p E$ v
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
% r2 c& X8 \1 P f0 ~5 o" X6 s/ m9 O“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
3 K% Z" {' _- ~9 T　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
5 u/ u) P) ?1 H, U: z比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
8 i; B" }' Z! k5 E9 A, H+ v7 ~+ q则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。7 F* L& q' n0 G3 g, ?! u( ^8 i
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。. V) n+ O0 A; [2 e# b& H" K
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
$ O2 x* V( b* j! Y7 SsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象( s$ r" T5 d W
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
' J3 J) y# y. ?* L2 X6 o1 i7 c例1.表单触发或加载时，逐字输出字符串

<html>
- E. y$ N/ R8 g, T H3 }- [/ A
<head>
" q# {& i2 _, w9 n* c+ ]" c, w) W
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6 k$ E3 \) l- k$ B5 ~8 H& M
<title>无标题文档</title>
. ]8 k+ K! t" k- w; }
<script language="JavaScript" type="text/javascript">
4 C, G) o) R3 Q3 J- C2 E: D
var str = "这个是测试用的范例文字";! ]6 d3 [+ q+ z! i/ c0 h
var seq = 0;
4 l f2 l j9 @8 b n: P- A) Y
var second=1000; //间隔时间1秒钟
/ D7 Q( C5 ]6 {# D" a9 v) z0 c" n
function scroll() {6 W/ k! h) }1 \, S' K4 U
msg = str.substring(0, seq+1);! `/ J' d4 }! R8 g g2 p0 E4 O
document.getElementByIdx_x_x('word').innerHTML = msg;
) @5 x; F. h7 W0 n" A
seq++;
, w4 A+ ^' Z% w7 Z
if (seq >= str.length) seq = 0;
( Z, M6 {3 w' F! W* k, @ |8 ~
}) R' U5 B; x% ?( N! z
</script>' |; T2 f l8 `- C% q/ P' r9 s
</head>
2 H; S0 _. @; W! h( o2 g \7 P
<body onload="setInterval('scroll()',second)">2 x( Y; B' r, y2 A9 O' R" ?
<div id="word"></div><br/><br/>" E) @ \% x+ V( B3 ] @
</body>. G0 M9 d( X3 X3 H2 P) o# {* L: [
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9 k1 L. ~2 S' B6 P, u4 r4 A
<html xmlns="http://www.w3.org/1999/xhtml">* C, }' e4 n* K
<head>
+ Q# j# Z9 e3 a' f) H- n* J
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 U, {* U) P' I5 D1 U
<title>无标题文档</title>
0 R; u. C3 w( ^" [: L
<script language="JavaScript" type="text/javascript">" [: x- ]6 B" T( v* U
var second=5000; //间隔时间5秒钟
' v( W1 c- }+ E3 _3 z
var c=0;
& d6 x% ?, m! [0 \- W `
function scroll() {& S% a4 m- E3 |8 g2 a& C L
c++;
- e- A& n1 s8 p# t! d _
if ("b" == document.activeElement.id) {
: ]0 ?: s$ S5 V q B
var str="定时检查第<b> "+c+" </b>次<br/>";
+ q s1 J8 ]4 Y9 p3 L9 q2 B9 \2 k
if(document.getElementByIdx_x_x('b').value!=""){ G- o" L1 `' _# w$ {: Y0 @7 }! @
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";# z3 {# _" G5 }' }% r7 K
}
! c6 Q; D9 a) r3 I( f$ ]! v
document.getElementByIdx_x_x('word').innerHTML = str;
/ r7 u( N2 k' h7 E4 D! }- E
}
3 L4 V& p; P, S6 {$ S/ ?
}& R2 \0 \0 K' T* ^7 u
</script>
' t" G, R' B: q8 i
</head>
0 r, |# ?# y3 L- w h$ s1 T. U: ^
<body>+ D1 W8 |+ S+ S9 }2 W6 C
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
6 a& o7 f$ N5 |$ n, B! b3 t: X" B
<div id="word"></div><br/><br/>
9 u2 C4 y9 q; r) N9 A4 y
</body>3 @& Q2 Q$ X% F# K: s- T5 o
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">. I$ }1 n4 F, o: W- [) E
<head>
5 H$ s$ e, p7 e' O2 {+ J8 j' s% l n
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />" o* y% C2 e: s: s& m0 |8 i: ?
<script language="javascript">2 c1 @3 [8 D. P" ~. `
function count() { Y' ~2 g( V7 i4 A( m
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
# m% H* I* k: s/ w% x3 U$ D) }5 [
setTimeout("alert('十秒钟到！')",10000)
3 b3 F5 i# @. \) B' f
}: c) ^6 U2 d. W8 I9 n( j+ c/ d% z
</script>
4 ? _) Y' k( [5 h
<body>: b# O5 d2 H, O6 h
<div id="m"></div>
p4 j9 W; j8 _2 t
<input TYPE="button" value=" 计时开始" onclick="count()">' O& U* `6 e' y; z1 ]8 m# z
</body>7 f0 p0 b% [0 a
</html>

复制代码

例4:倒计时定时跳转

<html>
' a% p2 [8 | L1 e0 K \( K
<head>4 \6 s* k. Z7 l' J1 s$ s3 `1 d
<base href="<%=basePath%>">+ n5 c) a1 j; J( y$ I( w$ _
<title>My JSP 'ds04.jsp' starting page</title>
! r N6 G O( _8 M" x3 }5 @
<span id="tiao">3</span>
8 C8 J; |3 j8 A8 I
<a href="javascript:countDown"> </a>秒后自动跳转……5 Q! ]# }) }, x7 d
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>3 W% T! E) o+ J4 R
& Q$ J z7 z( Q8 P6 [9 R O
<script language="javascript" type=""># Z# {0 L) S. p+ b1 l* G
function countDown(secs){
- Q2 U0 m$ q( E. o/ k+ ?
tiao.innerText=secs;7 f# F. C* b9 a7 e
if(--secs>0)9 p4 z: _$ W1 }, L3 o2 ^
setTimeout("countDown("+secs+")",1000);
8 C5 h2 A) T) A. ]: Y6 c2 p5 h
}5 u5 g1 H+ {- O- l" \, k# a
countDown(3);) }' q6 G8 K r" k5 d$ C
</script>; _2 T |% _* r, [4 z! ?5 y
8 M8 w2 \; G' j1 G
</head>

复制代码

例6:

<head>
- a3 v. F4 C* y" h, J0 d* Y. r
<meta http-equiv="refresh" content="2;url='b.html'">
$ L! ^4 F& {) `# F) G
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">+ m* Q. y) ~. P9 d; x. Z
setTimeout("window.location.href='b.html'", 2000);8 T1 v. m8 |& O }9 n
//下面两个都可以用 l$ R0 ]0 S: Z+ i
//setTimeout("javascript:location.href='b.html'", 2000);" v0 l' j, M1 y9 R% i/ h
//setTimeout("window.location='b.html'", 2000);% V f {( a3 ?4 H7 z& d, _( J+ d
</script>

复制代码

例8:

<span id="totalSecond">2</span>
" e h2 s+ F7 t
<script language="javascript" type="text/javascript">0 w: s4 N# K/ H" i+ i3 o8 y! y: A
var second = document.getElementByIdx_x('totalSecond').innerHTML;; w; r+ s6 }- \$ y1 _
if(isNaN(second)){
9 a% d8 j! q7 V3 J: h5 A
//……不是数字的处理方法
# P1 i% I2 e3 y
}else{# ]4 K3 i/ u) l. g
setInterval(function(){
/ P2 W. J" y* o* z$ q9 G% ]. I U! `
document.getElementByIdx_x('totalSecond').innerHTML = --second;
/ U# _2 v) J$ G
if (second <= 0) {
1 X5 x) X& a. b" E. t
window.location = 'b.html';: M- T2 n7 Q: d5 ~
}0 V m, W; ^& N& H7 e! M% P! p1 X
}, 1000);
1 l4 r( E$ p. B: ?+ A6 V
}
1 e: s8 ] [9 {1 F& G
</script>

复制代码

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

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