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

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

1，只执行一次的定时器

<script>
3 \. ~* ~4 ` d$ ^. @
//定时器异步运行
7 X6 O% z$ w7 C6 i4 h
function hello(){
% x$ m1 W: Y% v7 _0 A' B! v
alert("hello");
; a# B$ k) Q6 t0 Z8 z# T
}
+ d& m" y& o( H2 |# `
//使用方法名字执行方法
; P, A2 c! z" `' \) X9 O
var t1 = window.setTimeout(hello,1000); ) R' h8 ]; t) d" r2 D, h
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 9 i. _2 m6 s p; J. {! w* \# Z6 J
window.clearTimeout(t1);//去掉定时器 6 N5 |% P F% }6 u( `0 n! F" _- l
</script>

复制代码

2，重复执行的定时器

<script>
r. J0 A s( N
function hello(){ : P( S1 y; B7 B3 h* f: l
alert("hello"); % P# v3 k1 C* C3 V- t0 T
} : k. C- J; j0 \$ _
//重复执行某个方法 2 O, N! c% M8 H9 s1 U7 a
var t1 = window.setInterval(hello,1000); , y3 \" o! ] B1 L' ^
var t2 = window.setInterval("hello()",3000);
: U7 X# ?& P# }1 y3 v5 _$ u
//去掉定时器的方法
4 \' q6 |, K# b- z
window.clearInterval(t1); 8 L' G5 [0 e) @
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
4 C- _' Z4 ^5 C6 S- _4 h2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成3 B x# m& }; g4 h
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
! k# O q* f p$ F" t　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。1 A o T: e& V7 c# v
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，- W- O8 _2 A7 Q8 \) p' u2 `+ N
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
D3 X0 n6 k& v; h' w比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
+ ]% t4 w, c- ?( k' R- qsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.6 q8 z2 ?) ]3 h% W+ _
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象* g" G( K* y# r+ t/ ]* X: {* o
clearInterval(对象) 清除已设置的setInterval对象

略举两例。( h7 m" X" V. I* B$ M8 p2 s: j, L0 U
例1.表单触发或加载时，逐字输出字符串

<html>
! h# Z! B4 e" U; a6 @
<head>+ U, @, i2 g1 _, w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ e" m; b9 N3 H' _4 `2 a
<title>无标题文档</title>
0 U6 { l- Z7 k! l
<script language="JavaScript" type="text/javascript">
* ]; A$ w, U( V) h8 r5 t
var str = "这个是测试用的范例文字";' o, V. o' ~' b2 b% I) U( p
var seq = 0;
3 P3 q8 N3 u. t* \7 P9 O
var second=1000; //间隔时间1秒钟
! X7 \5 q3 _9 h+ {/ C
function scroll() {
# p) B, F2 ~! p. a. M
msg = str.substring(0, seq+1);
( s, V+ N P1 s) p2 v: R
document.getElementByIdx_x_x('word').innerHTML = msg;9 B4 Q+ l2 x- X# \3 S
seq++;
- n: u1 \* ]; P
if (seq >= str.length) seq = 0;& O9 K ?. I( N2 c- O$ H
}1 ]1 y% {( D0 r1 O
</script>3 ?8 S0 U( r( E* ~) U
</head> N9 D! |3 r4 H O" H9 D
<body onload="setInterval('scroll()',second)">
% Y( e$ k# x+ p1 G5 P
<div id="word"></div><br/><br/>
U0 F8 S$ Q! Y/ X. N% k
</body>
% q% K; i/ \ b! K9 C2 n! i' S: I
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7 a5 K* y9 H+ o
<html xmlns="http://www.w3.org/1999/xhtml">* H- H! r5 j- d! G8 A7 n: t l; S/ P. I2 {
<head>
7 P5 M1 b" k, d" O
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 b: |; N$ V6 e! ~) Q) t
<title>无标题文档</title>, W7 [- i; h' }( l
<script language="JavaScript" type="text/javascript">$ V8 R, t- D! }0 m2 B
var second=5000; //间隔时间5秒钟9 j- H. c7 F7 [; W8 f- r
var c=0;5 v* @) A! p. l2 K, X0 d" {; E
function scroll() {
0 `/ [( B W0 z4 _! i
c++;
8 X+ w9 F2 k3 q
if ("b" == document.activeElement.id) {0 h8 O2 H" l( f% \- y; B
var str="定时检查第<b> "+c+" </b>次<br/>";
4 R+ y6 A& f& `! s
if(document.getElementByIdx_x_x('b').value!=""){
/ r% k- u7 d: F: v( J1 d- a
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";1 ~1 m; R1 b# M* w& Y
}8 A* L: T8 `; x% g" h1 x
document.getElementByIdx_x_x('word').innerHTML = str;: _: z$ w/ D* z+ J
}7 Q6 X( X6 K6 Q
}2 A; m) z) ~& c1 Y7 X0 F
</script>" j5 |$ W/ }/ }
</head>9 P: `" n7 i2 N1 e# o3 u+ T8 V
<body>/ m7 a8 ~8 z# H
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
{! W( V0 I" y; z( U) l
<div id="word"></div><br/><br/>
; |1 T( E7 a* X# R% l, V5 ^
</body>$ k/ _5 V& Q+ @2 Z5 Q
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">7 q b$ f+ L2 }7 Y
<head>
& h% h9 X$ P5 W1 W* R
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! C- T; h" o5 \( t2 u
<script language="javascript">: i2 b4 Y1 C; k
function count() {) e) T! Y1 @( A6 z4 C M6 ~/ I% X( u
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' [, {* k* P1 p9 ?0 ~
setTimeout("alert('十秒钟到！')",10000)3 F" Z& k# n3 G2 r7 _1 B8 f0 H
}
. P. T+ ]5 D8 M
</script>
9 ^" q$ q4 H! t7 |1 p( S
<body>, |& X+ t: m8 H* k, N$ n+ Y
<div id="m"></div>
( k) R- V" N& ^9 u7 v: A) k
<input TYPE="button" value=" 计时开始" onclick="count()">
+ z( g8 S. x/ N2 u
</body>* b* r- s- M" P2 N1 ?$ G
</html>

复制代码

例4:倒计时定时跳转

<html>$ r! k2 M2 J0 s7 ^
<head>3 N9 V* C1 i$ m+ H& b a2 ?9 ?" `
<base href="<%=basePath%>">
: ?- @7 [$ l% O4 R
<title>My JSP 'ds04.jsp' starting page</title>
4 B6 g0 [$ u- }1 S4 r8 x& F) f
<span id="tiao">3</span>5 A* M& P# ^ |2 ~* P w8 l
<a href="javascript:countDown"> </a>秒后自动跳转……. U/ V1 I5 a/ H& s( I( q
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ F8 q6 t% l8 ], U
& p$ M( [( ~. @1 t+ g* H
<script language="javascript" type="">6 {- k2 s! v/ k- f3 J% Y5 t
function countDown(secs){
" D: |& D5 n4 R% @. ]4 e2 ]/ v% G# c
tiao.innerText=secs;+ h, {, E' p/ u* n: t( S) G2 T
if(--secs>0)0 R4 ^' R9 [2 u7 ~# l* M
setTimeout("countDown("+secs+")",1000);& Q" V/ M1 U, ~. E) k' M1 f1 i
}8 y4 U1 S( @- D0 Y
countDown(3);
# G8 ~7 q9 B1 c8 K/ g" [3 X$ k
</script>: C# T6 ~) U2 t8 c# P. F
y6 i4 r* L& c8 n# p% ^; o2 j
</head>

复制代码

例6:

<head> : b2 [. y2 o% O) s; x5 a/ q
<meta http-equiv="refresh" content="2;url='b.html'"> $ H. r; G0 C4 ]
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
, }9 h) g" O9 A e: s: o
setTimeout("window.location.href='b.html'", 2000);: j+ E& |, f/ M; d) n; g( b7 {' w
//下面两个都可以用1 m. M" b; N) W( c+ T3 W# E
//setTimeout("javascript:location.href='b.html'", 2000);
5 v& `. q/ K8 ^5 o/ v
//setTimeout("window.location='b.html'", 2000);
! w, @( _9 ^; r# Q
</script>

复制代码

例8:

<span id="totalSecond">2</span>5 H) s6 `, \1 ]2 d
<script language="javascript" type="text/javascript">% O/ Q8 A/ J) H* N" T5 E
var second = document.getElementByIdx_x('totalSecond').innerHTML;
3 x: s, W8 a* w. `
if(isNaN(second)){" a$ }' @+ N, Y4 I
//……不是数字的处理方法7 H: N' _# M' [4 y9 @6 ^/ K
}else{0 A! T6 J* N$ I( |3 H6 l
setInterval(function(){3 O* X; W# O7 |, E
document.getElementByIdx_x('totalSecond').innerHTML = --second;# X* |+ y- G/ T* ?! k! O8 V$ ^
if (second <= 0) {
. @2 a. m% X1 p! ]- T
window.location = 'b.html';* Y$ _- b) t: {
}
2 F# E2 m: P2 a4 [9 j' j& G' O
}, 1000);9 I# p4 q! y0 c \! p& o8 q
}
; _2 t' X" m; O5 M
</script>

复制代码

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

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