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

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

1，只执行一次的定时器

<script>
5 j; N7 X) f8 [% B+ q) l/ p R
//定时器异步运行
1 b2 h9 p! }9 l9 \$ c+ B9 @
function hello(){ `5 I, i% L E+ R0 x7 U5 Y) U
alert("hello"); , W n2 o3 n: b6 ]* A; S ]9 X) H
} & c5 w/ f! |4 j- q- N
//使用方法名字执行方法
3 f1 Q+ ~- `) z* A! P0 m* O# J
var t1 = window.setTimeout(hello,1000);
/ _$ u: D! z6 |0 ^8 W/ O5 v
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ( c7 P p7 R. G+ n
window.clearTimeout(t1);//去掉定时器
0 p. z9 l2 j: S8 n' V$ k3 d. n
</script>

复制代码

2，重复执行的定时器

<script>
. ^7 ~& h9 M; ?8 x: H& z! S9 m" }, e
function hello(){ 4 D: z z, C& O3 z2 e) ?
alert("hello");
6 y2 _7 P' [) L: F) x0 {/ x
}
6 ?: h9 A: B! J1 m3 x
//重复执行某个方法
J9 C% `1 B* i3 {4 O
var t1 = window.setInterval(hello,1000);
/ e: C) Y0 g! Q6 I
var t2 = window.setInterval("hello()",3000);
- y+ J0 n, V l. u7 T: P0 n) w
//去掉定时器的方法 * x# |. ^; T/ \! j2 o. A
window.clearInterval(t1);
* m" D2 x+ ^ O$ i
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);2 o; b& _) T% X4 d7 g
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成5 W4 v( v6 V8 j l4 U) o
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
. k2 o) v* q2 M' |. Q　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。/ |/ \2 p* Z4 c. `! h/ a
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
( @, c( Q; B' C0 G3 a则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。 R3 x/ O+ N% i, C L* U7 _3 { z
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。- h8 }( w h9 q5 h0 r+ l
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
) P' x+ ^- \" R% L% ~setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象8 |' P' _$ R( k7 k9 u( S- S
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
. d# R6 f6 ~; d. S; C* {例1.表单触发或加载时，逐字输出字符串

<html>! F! A+ C& q. B; @
<head>
% p% u/ e2 u& [/ x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# C4 v- U4 C4 B. U5 u, t
<title>无标题文档</title>
s( b$ C+ v W& y8 @
<script language="JavaScript" type="text/javascript">( q' I' B4 K0 T2 F; Y* v' \
var str = "这个是测试用的范例文字";2 }, J. h# _2 f. m" V" ~5 d
var seq = 0;! t: D4 S# a/ W [' {, O) a
var second=1000; //间隔时间1秒钟
" G6 y ]; z& c1 n1 J( ~6 a" p
function scroll() {
* _) T/ D% M% V* f: n+ L
msg = str.substring(0, seq+1);
7 O/ f5 ]! Q' I' c; d0 S
document.getElementByIdx_x_x('word').innerHTML = msg;
9 w! [0 E) ]* ?- R z% U2 Y
seq++;+ T. D( H; b1 m7 q: I1 W
if (seq >= str.length) seq = 0;
# S/ V- Z' M1 A) K5 Y
}, Y/ X( A [( L' [& O- d; [
</script>
* R$ r" n! x8 |1 L, `3 P
</head>) V" F& s/ n& ~# D
<body onload="setInterval('scroll()',second)">
' r( c4 O m3 @* |+ h. f, C! V
<div id="word"></div><br/><br/>7 a( d* n& O/ K; B
</body>) m2 ?+ X( k- e# L. E9 r
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
" i. [5 L( {! K1 ]; y( G4 j
<html xmlns="http://www.w3.org/1999/xhtml">6 h" L& a" j Z8 ]. p5 B/ Q) n! x
<head>* E+ X$ m( c3 o1 K: \
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />& X9 r5 D" C+ F0 p: i
<title>无标题文档</title>
! z) i4 K" a* v5 S
<script language="JavaScript" type="text/javascript">
4 B9 m8 U( S7 r2 f0 R
var second=5000; //间隔时间5秒钟' U$ r, b$ w9 N" Y# ~' f
var c=0;
0 d- Z6 c; k( Y2 u- @" d: k8 s2 D
function scroll() {
5 Y9 k- [& Y9 P8 Z* m7 }
c++;' K6 [! E6 \: ~* e4 `
if ("b" == document.activeElement.id) {; v" s2 `: P/ ~$ r
var str="定时检查第<b> "+c+" </b>次<br/>";+ H% f% u' j$ v4 j1 X7 g9 S/ Q
if(document.getElementByIdx_x_x('b').value!=""){
6 A. D/ t9 D! |0 q0 H; K1 m
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}8 y% ` ^% O- M% y' K
document.getElementByIdx_x_x('word').innerHTML = str;" s5 W9 L" ?: w! d2 Q
}) A9 I7 s$ V9 m7 b3 l
}
5 v% H S6 k' U8 H5 d! u* Q
</script>, S, C- K: z+ q, K5 f
</head>7 ?7 C! g5 \' y
<body>
$ m; D% S! @. e; C* f% U
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
+ m0 ^2 n5 u1 h8 ~. D
<div id="word"></div><br/><br/>
- o% C$ @4 N O# g X5 u! O, ~
</body>
; t. Q' {. c$ [1 {, O+ E
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">* @: s( r. j$ d$ h* @9 v
<head>
& ?. z; I4 T! f; o$ S ], K" n
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
/ d0 h- I& |4 C0 s9 d# ^( T
<script language="javascript">
3 D. H8 s# _5 c O v
function count() {
& R' W7 ~3 h K* Z( W0 R
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";9 _! x, m% }$ { }* d
setTimeout("alert('十秒钟到！')",10000)
; F9 a& K: m1 s/ h/ i
}
/ b1 ]+ S, A+ s8 d" ?
</script>. T9 Q# T- f6 |* z
<body>
6 R2 b8 o& J9 s2 \# L6 W
<div id="m"></div>3 T$ K1 o" d L3 @' B6 A! U
<input TYPE="button" value=" 计时开始" onclick="count()">' b* W Y/ d/ C6 x; U
</body>1 ?8 @! n( a" I: r
</html>

复制代码

例4:倒计时定时跳转

<html>
* f. V O9 s/ b2 @2 O
<head>' F5 U2 O, j5 U5 S, ~( Y
<base href="<%=basePath%>">, t1 N; D* {8 a# Z0 s( `& ~+ m, G
<title>My JSP 'ds04.jsp' starting page</title>4 D6 ~/ D$ C+ |- Q, V9 {# K
<span id="tiao">3</span>8 s& m" [* ], H1 u, [- F
<a href="javascript:countDown"> </a>秒后自动跳转……
2 L Z& l) Q3 }
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
. i& n' @5 S" n, R' n" S: n* V
6 [+ e5 c0 U5 f4 ?
<script language="javascript" type="">
8 q8 E. ]7 Y9 \) y
function countDown(secs){3 S8 d, F# M6 l! `6 b2 h3 p
tiao.innerText=secs;
) i, A; m- V D$ [. N
if(--secs>0)
$ g; s1 a0 \: u8 j7 j' e4 x1 I0 d5 E
setTimeout("countDown("+secs+")",1000);: `$ c! ?0 M+ c+ L: D
}
( ?& _% L; _6 \5 c, L
countDown(3);' P5 B: O! K5 y1 O( }) Y
</script>
% @# X' Q, P% `3 ]! j- K. i
) w2 @; c8 P4 ~. I) O
</head>

复制代码

例6:

<head>
% ?. J5 c/ F1 D7 ~, ~4 C* H
<meta http-equiv="refresh" content="2;url='b.html'">
- F: f) o7 T9 k* m3 f! F
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">! v& b* k% G8 f6 q* ^9 S
setTimeout("window.location.href='b.html'", 2000);0 E% g. o" {! J8 ^4 Z% V, l" M
//下面两个都可以用% p" S+ z- h6 m# X8 b3 Z
//setTimeout("javascript:location.href='b.html'", 2000);
: E6 K: K2 d. |# |
//setTimeout("window.location='b.html'", 2000);
/ ~: z, x# x+ d" |6 I- D$ W
</script>

复制代码

例8:

<span id="totalSecond">2</span>
" k7 q; v/ Z1 P9 }: D5 U4 l5 L7 s, g
<script language="javascript" type="text/javascript"># x# Q+ R" \2 M. l: k7 C" ?( X
var second = document.getElementByIdx_x('totalSecond').innerHTML;0 s- N2 n9 W3 g0 u; _+ f" Q6 z
if(isNaN(second)){
# Z+ M1 m9 W) s, }
//……不是数字的处理方法
8 I1 n* N( s! I) X% B6 e
}else{* i+ {. b `6 I3 w
setInterval(function(){
( Y3 u2 C1 U D- g. O- A) a! S& g
document.getElementByIdx_x('totalSecond').innerHTML = --second;
& \+ l! T$ q) a4 d! x
if (second <= 0) {& y" U/ d" x( \1 I
window.location = 'b.html';
% r* R& q2 E' ?: }1 s/ r
}
/ f- F, T( F( T" K/ V
}, 1000);4 g$ v5 U% _* O6 p5 L/ m9 g
} 3 P; ~8 }: O5 m1 w0 i; M
</script>

复制代码

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

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