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

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

1，只执行一次的定时器

<script> a* z. w# V7 Q& t+ Y% l2 [
//定时器异步运行
f3 J- u5 ^/ W
function hello(){ / I2 r6 ]/ Q# r2 V! _7 h
alert("hello");
; _1 b1 N$ F5 i$ W* O" M
}
; G0 p# n' M0 j
//使用方法名字执行方法
, z% p/ W. a" n$ P, _
var t1 = window.setTimeout(hello,1000); % B0 q! ~+ l1 j( M; Y
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 3 _2 o8 s6 N7 `4 A; @0 B, {, C
window.clearTimeout(t1);//去掉定时器
8 J3 {- v. ~3 X0 a" {
</script>

复制代码

2，重复执行的定时器

<script>
[0 r- g$ R" U* S( [ W/ w$ G
function hello(){ * w, N3 H* p% V8 ?
alert("hello");
/ u8 O% r& O" I9 y& V" Y
}
3 f! T" ~# G) V$ F6 {9 g
//重复执行某个方法
3 J$ R, Y1 K: a4 V, L
var t1 = window.setInterval(hello,1000); ' z' R" ?1 _6 {8 ~: u8 g4 k
var t2 = window.setInterval("hello()",3000); $ d2 I, R/ E) W5 F
//去掉定时器的方法
7 o- Y, _' V7 j6 F0 o
window.clearInterval(t1);
) _, \1 u' t X: _
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
3 x! L1 E1 Z- k9 O5 {" f- }2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成7 r( V/ j& r: L, b* \, W
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
1 _' _& ^6 \" y: L- D6 ?! j　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。, \' k! c0 p! u/ P
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
" a q0 T" S0 d1 L7 h' C$ N则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
( u- T1 d* Z% ?3 b5 s比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。4 S5 e: U3 U1 A
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
* I' l' {. A7 h7 Y' H8 XsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
4 G C& e+ k8 t. {' t1 m# eclearInterval(对象) 清除已设置的setInterval对象

略举两例。
- m( L l( u f6 `: E9 G& W, |例1.表单触发或加载时，逐字输出字符串

<html>! \) H4 J7 \% c' a% w+ W# ]
<head>* q7 c; |. A1 W
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
9 x; b' a5 W4 t
<title>无标题文档</title>
, w# W' p1 u$ w0 T2 H4 o
<script language="JavaScript" type="text/javascript">, l! M: \7 K3 K3 B) K1 q% I' T: L
var str = "这个是测试用的范例文字";8 ~) V9 _ T* i6 g* {
var seq = 0;% `. x% `2 Y; g% P5 M, `. j# A- Q
var second=1000; //间隔时间1秒钟5 U9 d; B/ S7 I) B" d: h3 o% R
function scroll() {1 p3 z! p5 ]1 x% Z. ]
msg = str.substring(0, seq+1);
9 h$ N+ y1 ^/ y; S4 }5 \$ V) r
document.getElementByIdx_x_x('word').innerHTML = msg;
% g$ m! t- w! F; {* I8 h
seq++;5 G1 y! m3 u+ ~1 |
if (seq >= str.length) seq = 0;
5 F' K9 w" h8 L: K$ u2 K
} m! X+ d k2 a3 P2 `. T9 q
</script>
) ^. [/ d7 C* @8 @$ c7 i4 K
</head>: H' Q; V5 D9 ^+ E/ L' ]
<body onload="setInterval('scroll()',second)">
9 }* G- G3 k, V2 J% v
<div id="word"></div><br/><br/>
! K W! V) G0 `" Z
</body>
* o# o0 @! m' H2 w/ f) p2 m
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">/ ?2 \1 e5 d I0 _) J9 u! ~0 H( U2 L
<html xmlns="http://www.w3.org/1999/xhtml">! _% y7 ?; E6 t1 R) N4 I
<head>
3 u' f2 @, p& y! X1 |% A% W/ L) C
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />0 q% t! Y. Y' K8 u$ j) Q3 t3 i
<title>无标题文档</title>
% w5 u/ W3 Q7 p8 U, Q
<script language="JavaScript" type="text/javascript">
7 B3 a- o: R! c, W( a) }
var second=5000; //间隔时间5秒钟
5 M$ E/ z( Q0 b+ _+ r0 D; Y
var c=0;
0 g D- N* B$ k! ?
function scroll() {3 Q3 H; W5 y ?0 g
c++;
8 `0 s+ \& G; i# {5 e
if ("b" == document.activeElement.id) {
/ n( r/ W. H5 ` b# e& k# g
var str="定时检查第<b> "+c+" </b>次<br/>";0 H6 b& ]/ |+ m
if(document.getElementByIdx_x_x('b').value!=""){) O2 j5 ~. y' o6 i2 K( o9 D0 a
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
4 D" q* n M* d+ j$ U+ u, y
}
) N" R) a1 z2 }* o# [6 f4 b
document.getElementByIdx_x_x('word').innerHTML = str;
8 p/ S; F2 k* ~* w
}
8 ~3 |5 ^: \0 O* Q2 u
}
8 z- ^3 X* a4 D
</script>
1 |- ^8 J! h8 e) q: c$ X
</head>
) P) L7 h7 {5 y" c9 q7 V3 b
<body>- o& b% c+ @5 r- F* r7 E
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
2 E6 ]$ \# n% Z4 \- t1 j
<div id="word"></div><br/><br/>1 z) p- v& ^7 Y
</body>* r0 ~3 W- L/ S8 v. \
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
0 z% b8 ]4 _6 W* L7 h, S) u% t
<head>
0 Y6 B; `8 [" W" Q) O2 w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 B, q4 V6 S8 k+ x: H( ]; r5 H
<script language="javascript">4 u/ I) L6 o: M4 d' D4 O
function count() {
. _; \! J4 G9 K
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";/ w3 _3 d( h X) d# f
setTimeout("alert('十秒钟到！')",10000)
7 ~- b4 }) w7 t5 k2 K; _5 p7 O
}
% v8 X% L* H H8 e) ]
</script>
0 A$ A; ], I) S
<body>6 l( s# \/ [- ^& A
<div id="m"></div>3 o! U& R" P* d( m$ |7 u3 j
<input TYPE="button" value=" 计时开始" onclick="count()">
7 W e: ]* D$ B3 c
</body>, V1 Q; V: d) C5 c) b5 p: p
</html>

复制代码

例4:倒计时定时跳转

<html>
# p4 n% q5 P7 M% N
<head>/ d3 H1 x' m, r. F+ h4 k5 T2 o2 h
<base href="<%=basePath%>">% a# Q, u2 G0 S M& Y
<title>My JSP 'ds04.jsp' starting page</title>
* z6 `- W6 x0 X0 D
<span id="tiao">3</span>- M# k% ^. J( R
<a href="javascript:countDown"> </a>秒后自动跳转……
+ Y; U! @; N ]+ W/ [: [
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>' I" l! ~8 u& X3 b( x: o
5 c% g& U, T2 W+ @( [5 q$ |
<script language="javascript" type="">
* }( B, s: I& q2 d$ w% p& N2 J/ G6 `5 L
function countDown(secs){% v! k! _% q, X$ z8 J: ^& Y4 U
tiao.innerText=secs;
$ s2 [7 a0 r- `: `6 B; l
if(--secs>0)9 e! J; g- \# P" g: z! W
setTimeout("countDown("+secs+")",1000);
5 d7 q1 o/ `& J( A6 y
}7 s N( l f: }
countDown(3);
6 E6 w- Z. S: H: W' E5 w
</script>- X! ^; s, y" ~2 t' ^# M0 V+ k* \6 B
8 y! Q3 t- B, b2 o! F; q1 X0 p0 I
</head>

复制代码

例6:

<head> [% I6 ~2 v& l
<meta http-equiv="refresh" content="2;url='b.html'">
6 ?/ y( u3 d1 ^! w1 ]. I
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">1 N8 _6 l, S n
setTimeout("window.location.href='b.html'", 2000);4 f- W1 Y7 d+ F
//下面两个都可以用
* G+ k, S! G8 M+ q3 \8 [2 e) s8 |
//setTimeout("javascript:location.href='b.html'", 2000);$ y# L* p& b3 z
//setTimeout("window.location='b.html'", 2000);
$ G+ |0 {# [+ g# V9 x/ O
</script>

复制代码

例8:

<span id="totalSecond">2</span>7 D! W& b. ^' f7 D% M% Q3 m! i
<script language="javascript" type="text/javascript">1 ^" `+ t- n3 A; \. v* h
var second = document.getElementByIdx_x('totalSecond').innerHTML;
4 m7 D6 ]3 G. g! |* k, w5 Q
if(isNaN(second)){
) o7 E- ^0 {6 y) ^0 R# m- B7 b) y
//……不是数字的处理方法# R9 g# X, p' u3 V: B% ~0 `* L6 K; W
}else{
: E; a6 t3 R+ m& l5 J, B
setInterval(function(){6 M# z) y. N( X3 `+ I7 h
document.getElementByIdx_x('totalSecond').innerHTML = --second;
3 S, g R0 s- Z- Z
if (second <= 0) {
0 [1 g* T# W' }; I7 G
window.location = 'b.html';7 Z+ ^, J4 ]$ N& \7 H/ K
}! r. d" }9 V/ \& V
}, 1000);9 S }7 H' V( P
}
1 b. Z% j) ~. X8 S$ `
</script>

复制代码

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

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