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

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

1，只执行一次的定时器

<script> O; z- [" `, _
//定时器异步运行
! Y, f; s. ~9 ]9 f
function hello(){ & B7 i) H4 s$ W6 j- @/ N
alert("hello"); # _3 r) ^- E6 d; ~( t. M
} # W8 p" k8 I( Q& M$ D K
//使用方法名字执行方法
N% R! O; J/ h+ Y6 J
var t1 = window.setTimeout(hello,1000);
3 B8 A, B9 i x% a! |4 u
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
& V4 H+ J- S2 T I
window.clearTimeout(t1);//去掉定时器
8 U* N o. Y3 x5 L( n7 J. ]6 C
</script>

复制代码

2，重复执行的定时器

<script>
3 h: ^; O6 d% C" M2 q) j
function hello(){
0 k/ j5 O% S: G/ h# Z$ ^
alert("hello");
" a) G7 n. T1 A$ o- l6 N
} 6 ^2 K, ~' T$ H' l
//重复执行某个方法
5 l4 K# p( `. s* w) `7 A* ]( H
var t1 = window.setInterval(hello,1000);
3 y) b3 d( U3 X( C
var t2 = window.setInterval("hello()",3000); % u0 Z! z% U- |8 k3 A) F
//去掉定时器的方法 # U6 r5 O0 l, R
window.clearInterval(t1); 1 H& Z) s a' Y, E' t, W( k5 X- f
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
- `3 e5 d! H$ `, J& Y1 G0 ]: X3 V) I2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
M* S- j1 Y, V$ U' a% X# v“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
& p" b3 f5 Y" X- Q/ V& i　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。9 p0 d5 ?6 Q7 V; ?
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，8 O7 X# s, Z- Q2 H; P5 b- J( \4 G
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
& z9 H+ t% G( F" w比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。8 a- l8 a+ S7 S9 T+ Y2 ^
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式./ M7 ~+ ]$ [- ?4 E3 N
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象$ e' @/ \7 T: L5 y# R0 V7 d
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
' u# l/ l9 ]6 S8 }* G) L例1.表单触发或加载时，逐字输出字符串

<html>. ?5 I3 @" r# c
<head>
8 K8 Z5 a2 Z, ]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
& o& `% A" J1 ~
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">6 v: l+ Z. W5 n, k4 I# Q6 o$ o
var str = "这个是测试用的范例文字";
; c" D9 `: Q% L! a0 _2 G9 Z, g6 L* T
var seq = 0;1 ]. t3 n% k* h5 h
var second=1000; //间隔时间1秒钟8 c- S8 Z$ |3 Y! l
function scroll() {6 h0 J4 I: ^; @8 G3 ^$ n! U
msg = str.substring(0, seq+1); k9 z8 @. U* j& x* B9 N
document.getElementByIdx_x_x('word').innerHTML = msg;# j) G- s- a: c
seq++;7 R! [6 Q( v3 D3 k3 l: g0 G% i" E4 g
if (seq >= str.length) seq = 0;
, B/ K. u, m% J
}( E, q/ s0 ?/ c6 I8 }
</script>
- z! I6 c. t4 q6 M+ U0 {( ]9 N
</head>, v2 l M. }& V' ~5 t; f
<body onload="setInterval('scroll()',second)">
' q3 F! g' Y' m9 G7 A4 q( Q' [) H
<div id="word"></div><br/><br/>
$ \5 O, Z% T* _. m+ X( b. X {; Z
</body>) \" A: B. a. q9 n- D
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> h4 n2 q8 Z7 @+ D$ R7 I2 N
<html xmlns="http://www.w3.org/1999/xhtml">: y# p% }* M$ B! I- K
<head>/ G; ^; j3 |2 D; W/ x/ S2 ]0 z1 B9 Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
: E# D0 | {3 c' G/ E0 u* X
<title>无标题文档</title>
- u) V0 b+ t' V. P( O
<script language="JavaScript" type="text/javascript">% N" [0 ~! s; N1 d, j/ ]; O
var second=5000; //间隔时间5秒钟
$ B8 l. A' o+ s0 f
var c=0;
( o! e6 Z" f' l6 w/ F+ H' L
function scroll() {
3 `) K4 d0 U' o4 Y! r: A* S& q5 }# {
c++;3 j" F) H8 G+ ^% x, o" w7 E- M
if ("b" == document.activeElement.id) {) E& n( |0 `# V% u: s( l
var str="定时检查第<b> "+c+" </b>次<br/>";- ^3 Z) O5 k6 d) n! Z
if(document.getElementByIdx_x_x('b').value!=""){% }& }, W5 i9 ^; E
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
# _4 m8 k# w3 ?( D
}
' f ?$ V, [: X" a% t8 P
document.getElementByIdx_x_x('word').innerHTML = str;
) U: i" @* s' A! n. r6 h% Y
}
c( D; \& v( M- w3 h7 ^* F8 V* @- ?
}
2 Q: q7 o& t w4 T v% v
</script>6 V% O: B7 Z( q- L6 l4 y: \: R
</head>+ o/ R s6 ^8 V4 z4 y8 B' x
<body>
. k; W8 T, R3 l. V3 V+ \. W
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
t: w) a( G# Q# G* X: {. H
<div id="word"></div><br/><br/>
; [1 S( _8 s9 d4 ^! p8 d. v5 W% \
</body>
9 X) ^' V Q/ I: z3 X5 y3 E
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
8 [" L0 q. Y6 t" S
<head>
* O" D& n1 p% D V
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 Q. d, _" u% D) m$ G5 H% H( X& W
<script language="javascript">) R0 w2 p# K- X) e [2 m" P" _% I* }
function count() {
# ~/ U$ o6 |2 s" o3 P4 t
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";+ F/ m0 s, i: }
setTimeout("alert('十秒钟到！')",10000)4 h0 i' M q! ^, _$ |' p/ F
}$ m9 Q) z' ]) R; W
</script>
; |2 k, P( `4 ?1 B/ i6 d
<body>6 v) I! Q) D( j* k) |: l" C
<div id="m"></div>
5 o' R+ c- \) \
<input TYPE="button" value=" 计时开始" onclick="count()">. E5 q6 H0 K- W4 H
</body>
J8 }& j) L. R$ ?
</html>

复制代码

例4:倒计时定时跳转

<html>$ H+ D5 j. @1 t# w( Y- d+ g1 P
<head>
) ]' Z5 `, }% B* @- B
<base href="<%=basePath%>">% X. P, v9 h/ d2 h# a
<title>My JSP 'ds04.jsp' starting page</title>: K& b& t5 f* T2 r) V' z/ H$ F G0 B9 |
<span id="tiao">3</span>6 z! k! p: Z& ?! d3 \
<a href="javascript:countDown"> </a>秒后自动跳转……
" x3 |& j7 |2 w/ c
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>& H" F# M2 p# K, Q. V
' w) [0 t& ~" O4 Z/ m, z9 U1 B9 L
<script language="javascript" type="">
+ `: Z" E) z; Y. p! L0 q
function countDown(secs){
2 G! R* x6 I2 q3 B! V; I1 G
tiao.innerText=secs;9 i, B. y6 @5 K# x+ k
if(--secs>0), q2 f) d% d. l
setTimeout("countDown("+secs+")",1000);
, V# w0 G' H* k. w% k' `: o0 S5 o
}: H' {9 w# S/ ]2 k( s3 E+ l [
countDown(3);
$ p& a" M" g# R- @
</script>
, T+ \) A5 x0 w8 S4 X& z
: q# F* I" l! C( K9 ?8 R1 `
</head>

复制代码

例6:

<head>
: h3 r2 R& K3 ]! Q7 S0 G
<meta http-equiv="refresh" content="2;url='b.html'"> 6 D8 P. J+ r3 e6 s2 l
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
: P/ ^' [* q0 m
setTimeout("window.location.href='b.html'", 2000);
' ?9 h4 f. M) p9 E- F
//下面两个都可以用/ ~/ ? }* Y- R \0 E- M" o* X
//setTimeout("javascript:location.href='b.html'", 2000); T9 `( Q5 c% m4 a7 X
//setTimeout("window.location='b.html'", 2000);
: U$ {* W' x- T8 x5 e
</script>

复制代码

例8:

<span id="totalSecond">2</span>
`$ V5 h: I0 U7 e: ^
<script language="javascript" type="text/javascript">- B/ @' j' e. s$ u
var second = document.getElementByIdx_x('totalSecond').innerHTML;3 |1 j$ W# |& y7 {/ o: Q/ a
if(isNaN(second)){
1 p5 {: c, {* e" H- Y
//……不是数字的处理方法5 D r6 X" ^ s: d
}else{
8 B0 [* R4 E- x% _
setInterval(function(){$ \3 z/ {& V7 M
document.getElementByIdx_x('totalSecond').innerHTML = --second;
: ?" v0 Z% G0 u* S! W& A' z( ^- D
if (second <= 0) {
. T' t9 S1 ?- N% z
window.location = 'b.html';
: X" S! K$ K- I
}/ h; H$ C- L/ {& E
}, 1000);! f8 N; d' t, g7 ~& Y7 N; T/ E1 s
} ' e5 T5 \3 @" i. J( c! S* N
</script>

复制代码

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

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

浏览过的版块