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

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

1，只执行一次的定时器

<script> ) \* C$ N; ^; ?& \
//定时器异步运行
( e7 X5 z2 @' [! Y- R* v+ |- f6 j
function hello(){ - S- B. J. @& H& G8 n0 H# T' b0 f
alert("hello"); 5 b) ^( p5 y8 Q& ]
} A; |3 e( F- _
//使用方法名字执行方法 # ] G. ?$ Q# J- X' b9 _
var t1 = window.setTimeout(hello,1000); ) r; i0 \* o$ n) a, a% F
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
O2 f% n3 c7 h4 |2 ?6 ~
window.clearTimeout(t1);//去掉定时器 - {/ y& ]' E# s( b3 U/ `9 \- P
</script>

复制代码

2，重复执行的定时器

<script> 4 k" ~+ c" F& l9 l$ M
function hello(){ ! p# \/ i4 Q! ]
alert("hello"); 4 B9 T. c: E; t6 i( T @" \
} 5 D% S. A; a4 ~* q n
//重复执行某个方法
1 T3 z. H9 }5 w( d0 \5 Q5 v
var t1 = window.setInterval(hello,1000);
; B7 l* w ~/ o+ M
var t2 = window.setInterval("hello()",3000);
8 P% `6 f' L3 n9 G" x. u5 o
//去掉定时器的方法 ) [4 c5 d/ Z& _% o* l! x7 w$ `
window.clearInterval(t1);
& ~! q1 o$ d1 i. ]- Z
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);3 h3 `2 V) j/ Z' G, C' w
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成, E; b/ a1 a! n9 `6 x+ I* x6 Y/ v' d
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。8 _) d! X9 N9 y7 |1 G
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。. ~$ J6 ^7 R# k& T
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
$ |7 D/ a; {8 C. p, o) ]; F则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。6 \$ K$ }7 C7 {7 z- V/ E2 t
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。7 E% v& Q( Q" @
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.: g& q8 ]( e$ e: |& {1 Q$ W9 c0 v3 m
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
6 y% k2 Y' H( g3 l" D: ?; i6 a, xclearInterval(对象) 清除已设置的setInterval对象

略举两例。
/ p- _5 a( P1 m例1.表单触发或加载时，逐字输出字符串

<html>6 z, ~% M) f+ k, z0 p
<head>4 R A9 l% G5 ~; g' Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* |$ X& B b% K
<title>无标题文档</title>6 C0 U7 U. x# r$ B0 ?
<script language="JavaScript" type="text/javascript">
( X$ h2 o/ ^* k- I
var str = "这个是测试用的范例文字";
6 |: g% l( r# X* n4 t7 N
var seq = 0;7 K6 [8 ^- \. `7 h
var second=1000; //间隔时间1秒钟
! W. a; r l- N$ v% a
function scroll() {* R& ]; ?( [; T) Q4 m4 B% ]0 u
msg = str.substring(0, seq+1);/ ? b) }# e( F" V( }6 @
document.getElementByIdx_x_x('word').innerHTML = msg;1 n' B, ]8 m: y( b* O1 g, I4 P8 G
seq++;
2 N) h% j* c; M8 C' J" g6 k
if (seq >= str.length) seq = 0;
0 B9 s/ j. t1 \' h3 x
}
" D+ J2 K4 s' {+ _1 F
</script>7 I4 e3 K" v5 T5 @+ @% c
</head>. f9 ^* x8 H3 ?+ Q! J( a8 K
<body onload="setInterval('scroll()',second)">
- u. O1 Y( l3 w( J2 m
<div id="word"></div><br/><br/>9 e1 m& F4 T3 `5 G- M, w
</body>
+ E- f% T2 W5 w$ j1 N
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">$ N5 w4 u7 E" t7 x- N* b" B
<html xmlns="http://www.w3.org/1999/xhtml">
' \+ W3 p. K0 x0 H" S. X' x4 j8 Y
<head>
6 M n0 A4 }& V4 ~5 {9 b% C7 B
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 m* Z8 q3 ]' u/ v a! N" e
<title>无标题文档</title>& L i9 Q, j; z9 I
<script language="JavaScript" type="text/javascript">
/ V% l0 a( v. b8 _5 M, Z) K
var second=5000; //间隔时间5秒钟' \' a: u4 i, B, ]: ^. X; p
var c=0;
* w5 t: U8 P: p! x& v1 w
function scroll() {5 X/ E, l9 F) T) |
c++;
: j/ R2 l& @3 L. ^/ a: V
if ("b" == document.activeElement.id) {
6 `& g9 Z) g7 C0 a
var str="定时检查第<b> "+c+" </b>次<br/>";0 H) y9 ~6 f5 N" L& r; \
if(document.getElementByIdx_x_x('b').value!=""){
; A0 ~ r# C' f2 h& \
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";/ c9 Q5 x; E- Z
}( H/ c: G, I5 h
document.getElementByIdx_x_x('word').innerHTML = str;4 a0 X' K1 n: J; D% k5 P
}
9 `9 }2 [# M a
}
0 Z. o$ S# N! ^- B1 [, J" w( n
</script>) m6 F" w% X* O* y) a8 U
</head>
. c% @! Y- O3 i9 w, y' D5 `
<body>, p8 d2 U* B) A: S: G6 k
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
( w( X) `* i3 E- a" k- }0 V, P
<div id="word"></div><br/><br/>' N1 [! W' e7 n' Y' L
</body># W# o* C4 j. t
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
" x; ?1 K2 | b
<head>
" c# f+ m' t, `$ R8 q1 @
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
0 S1 A. P( n* Y! l6 B- y+ C
<script language="javascript">+ _* @1 U6 |" D2 ~
function count() {4 W- Q4 x/ v% S0 w3 N- D4 m
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";3 f4 m4 y4 Z9 L0 q% u- S* ^
setTimeout("alert('十秒钟到！')",10000). E! c: b/ I/ `1 e3 ?
}
% x5 @, Q: h$ Q+ D3 |) _
</script>
# s# i: P/ O( ^6 \9 ?) ^' E
<body>
7 o, @* @$ g! D/ f
<div id="m"></div>( y( D6 H& O- G6 N5 K% T* I
<input TYPE="button" value=" 计时开始" onclick="count()">
) f8 i) ]" M/ q! H8 z
</body>0 g- a( ]+ {8 ^5 ]- a# _
</html>

复制代码

例4:倒计时定时跳转

<html>0 O; ^( D2 j p( I' I
<head>6 }( { {+ k: g( y. _! q+ g
<base href="<%=basePath%>"># O( c6 z4 X" `
<title>My JSP 'ds04.jsp' starting page</title>% \1 A. t1 L6 t
<span id="tiao">3</span>/ m2 }8 ~+ b3 g; [
<a href="javascript:countDown"> </a>秒后自动跳转……
5 X" G0 {: R- B4 q; q4 P
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>- c: h; U l: o1 a- d) k
5 K- i" {& ^! ^8 z
<script language="javascript" type="">5 j+ t' y6 P# V
function countDown(secs){2 x, q8 M0 r/ f1 C G
tiao.innerText=secs;5 S: k9 ~0 D# i0 s' B8 w
if(--secs>0)% V# S: _( { o' `+ \, o# L
setTimeout("countDown("+secs+")",1000);/ [0 V' x' E. ?! n$ u6 O# t
}3 r) ]: b8 ?1 A& D4 G
countDown(3);1 W3 \+ b. w: ]" W: Q
</script>( R/ ^1 N1 E. ^4 F4 D% f0 L+ }
' D" ], N2 A' K
</head>

复制代码

例6:

<head>
5 c8 {* X% @% Z8 s
<meta http-equiv="refresh" content="2;url='b.html'">
: l" p7 i* u' ]
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
) b, R8 P" X3 s$ y" P
setTimeout("window.location.href='b.html'", 2000);
1 S/ J5 y M6 O& u- c5 G: e3 v
//下面两个都可以用
! K. a" F, e+ z$ K
//setTimeout("javascript:location.href='b.html'", 2000);4 U" C: V- V! g
//setTimeout("window.location='b.html'", 2000);
, l5 \# _) {! x: y5 R. f- z
</script>

复制代码

例8:

<span id="totalSecond">2</span>2 E* n+ M0 f1 |. m" E
<script language="javascript" type="text/javascript">9 d% V" z# G4 \& v! {9 s0 a
var second = document.getElementByIdx_x('totalSecond').innerHTML;
G3 q& z9 U; X6 ~0 W6 u/ A$ Z, T" ?
if(isNaN(second)){" m1 |6 g& f) K% J8 Q
//……不是数字的处理方法
5 \4 v! `3 }: ? s' R* P
}else{' b! h* l& g- H: _6 z
setInterval(function(){
/ E+ N0 |+ N- `
document.getElementByIdx_x('totalSecond').innerHTML = --second;, p( A" f f0 h$ r6 y
if (second <= 0) {# R3 z F, i; ~- t" q/ M1 H( h+ X
window.location = 'b.html';$ I1 S& z f6 q Y% j. h
}
+ V7 w0 `- g5 ^/ h
}, 1000);
* [+ l9 c3 J; I6 z- [
}
3 X) I8 o D2 {2 w( B. N
</script>

复制代码

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

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

浏览过的版块