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

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

1，只执行一次的定时器

<script>
3 L- K3 C) q) q" q' N
//定时器异步运行
! g% F4 Q$ j) ~; L4 U1 F
function hello(){
3 E- @7 y& ~+ I, H
alert("hello");
' s/ V' B8 D) Q; z4 v* z
}
0 n! |1 e& ~3 c/ U
//使用方法名字执行方法
0 Y" _# j1 L% @2 h
var t1 = window.setTimeout(hello,1000);
# e1 b+ U2 c- U8 x$ ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ; h' \' p; r1 y2 h; i$ S
window.clearTimeout(t1);//去掉定时器
/ M# V+ f$ [& l) Q8 b4 ~ {6 |
</script>

复制代码

2，重复执行的定时器

<script>
* l( L0 E; R9 q$ F- T( }
function hello(){ + J4 x9 q2 y3 _! R
alert("hello");
& A$ ?. V: s, H. o6 j/ ]" r% M
}
4 Z8 H$ [& G) @8 E2 @
//重复执行某个方法
/ I/ @/ Q8 \' P6 D% k, k; t
var t1 = window.setInterval(hello,1000); $ |0 A$ G$ ]* {1 I7 r P5 T: k
var t2 = window.setInterval("hello()",3000); . C7 X P& H G6 c1 o# W6 N
//去掉定时器的方法
: \5 V7 Y4 a7 h
window.clearInterval(t1); . h1 B" m# B- ~/ G8 _5 K; W" O; p
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
" v" b7 r0 l" s. G3 A0 L2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
$ E9 m5 k/ O+ d6 n4 i6 X; W“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
7 _) T$ |+ a2 d　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
; e- Z0 T9 n: I+ ~比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，1 t2 `0 B3 P/ {. ~" L. N1 I u/ Q: l
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。. g! ~) l7 `9 L" o
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。- [, m* z2 O# f, \& Q) [) w
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.5 ^% X8 w W% p8 ~' _9 o8 i
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象5 N4 d/ @' |2 F
clearInterval(对象) 清除已设置的setInterval对象

略举两例。% Q) E$ X4 b& u# v5 O6 N$ J. Q7 r( H/ l
例1.表单触发或加载时，逐字输出字符串

<html>
% K; a7 \1 @7 a, }: e& d; A/ B
<head>) ~- F7 r8 J! ^" y; ?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
. c; P3 K; l2 r( }+ f0 p
<title>无标题文档</title>; U; ?3 \3 P* k6 X
<script language="JavaScript" type="text/javascript">
7 @; p% I0 f4 u5 o: S
var str = "这个是测试用的范例文字";
( d) _' {% U5 y- H& ?' c, a) Q
var seq = 0;
, t2 M" Y6 I$ ?8 d$ v
var second=1000; //间隔时间1秒钟# _$ [9 x' o. @
function scroll() {$ Y& o6 ~. F6 k6 H/ F+ x6 C
msg = str.substring(0, seq+1);
' W) |$ Y: t8 d- h0 \8 h+ f4 E, Z: k
document.getElementByIdx_x_x('word').innerHTML = msg;8 \6 P3 q6 I2 x) E, F+ k' m" e
seq++;* F1 ~" Z$ K" m0 e3 k4 J/ g
if (seq >= str.length) seq = 0;
1 c, P; n( G. x
}$ z# T5 C6 T! Y) O) C* L
</script>
/ a, F3 } e. ?$ l! T9 |
</head>
) }4 y# ~1 h! u: u+ `9 g2 S
<body onload="setInterval('scroll()',second)">
# a- M$ j- Q# b4 z$ f1 ~
<div id="word"></div><br/><br/>
$ v) G b7 [& D9 R3 M9 c" y ~
</body>
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">: i( |- T8 N8 H) `) t! u7 a
<html xmlns="http://www.w3.org/1999/xhtml">
8 ^! g% F( \* ?
<head>
2 i3 W7 W3 M* k, A
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />: Z! t# c! o/ P; `& y
<title>无标题文档</title>" ?/ A2 D- p! ?8 J" P; W% N; o, b! b
<script language="JavaScript" type="text/javascript">7 g( R. ^1 ?- T5 z: g
var second=5000; //间隔时间5秒钟
+ |7 U2 E1 D4 v5 n- b# g
var c=0;
% y- u: p! m5 u# d# I- Q5 Z
function scroll() {/ D K; b% }9 o& z
c++;8 n8 a- `& ^! J+ z0 M2 `% q
if ("b" == document.activeElement.id) {
, i3 W, n( o+ U' i# j
var str="定时检查第<b> "+c+" </b>次<br/>";1 y0 p1 @( k3 b* N* M- }! C8 H
if(document.getElementByIdx_x_x('b').value!=""){- D& ]" z* ~ Y1 o0 `9 @+ Q: g( q& `
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
1 d" @- I# k) [$ y
}4 d* J2 j) e5 w6 k9 H( e
document.getElementByIdx_x_x('word').innerHTML = str;3 ?' b" |% x9 ?7 q0 N& }; M7 L
}
: O5 O/ K; m7 x5 J( x- w1 k1 M" Z- q9 y
}
$ A6 m$ O/ [! y; J: ^) O: g1 [/ y. v
</script>
& q$ N# Q5 y/ Q2 d
</head>* V) V j7 e3 [9 m9 v& v% d! V+ g
<body>
4 G4 P" _" A7 q9 @; }6 V
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
8 f" W1 A* C: V' |- o8 S. N L
<div id="word"></div><br/><br/>
+ w3 P6 I1 ]- k3 s: x/ Z% h4 @) u
</body>. N9 Q1 A0 u( X- B2 |
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">. t! R) s- d; c1 E
<head>
P% `1 X \: \% A$ l5 x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
9 e& c8 k: k; Q7 ?' Z) ]8 g8 Q
<script language="javascript">2 U4 s+ S3 Y3 L; m
function count() {
4 I0 ~% |8 b7 ?8 n! K: C
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
( I4 q! p7 k* l& M% J7 z% d
setTimeout("alert('十秒钟到！')",10000) e9 v. P0 r) B3 x! l- I) }8 \( P
}! B2 u/ G! S" S; `$ \) W
</script>6 j5 `! m9 E# @9 C/ X3 w
<body>
+ u1 a' ~2 {1 p$ Q
<div id="m"></div>( L7 R5 c" u4 B7 z9 Q' l+ S
<input TYPE="button" value=" 计时开始" onclick="count()">
0 d- G; P& ^1 x2 M/ ~% ^: U2 b) G
</body>
" h7 Q: A. x$ D/ C
</html>

复制代码

例4:倒计时定时跳转

<html>
9 j+ o# d7 p U. m' s2 R
<head>
2 B9 s: y- {6 r8 i3 I
<base href="<%=basePath%>">
4 k6 r& k! L: a& W, r- V
<title>My JSP 'ds04.jsp' starting page</title>4 c% s3 \9 v, `$ r& X$ s
<span id="tiao">3</span>
( `: @: r: ^% j2 o& B" W
<a href="javascript:countDown"> </a>秒后自动跳转……
\$ X+ P" L( z9 o- F
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>- P9 t' `9 Q) A5 i; `
# c, l! {$ B9 ~5 l( k* K
<script language="javascript" type="">' Q2 T' h) q1 q- @0 Q8 h& o f
function countDown(secs){- ~0 N* A5 \9 i; r- b( L
tiao.innerText=secs;
, _. A F+ X: ~
if(--secs>0)
7 {. m/ U' k$ T$ {8 [+ v
setTimeout("countDown("+secs+")",1000);
$ y" ]% w9 P7 _6 m$ o$ _2 i/ y3 @
}
) \) o& x0 P& a0 X2 r
countDown(3);( P ]) k9 c% K- {: A) L" q. a1 }
</script>
4 o6 M4 }3 ]0 O) g! Q6 i
! G0 Q8 K* n7 H7 y- \! _0 u2 _
</head>

复制代码

例6:

<head> - A, H( X& {% S8 u, s$ G* @
<meta http-equiv="refresh" content="2;url='b.html'">
0 w+ F, E% r# T; y
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
6 Q/ f4 e, `0 v( j% w6 t$ B2 _
setTimeout("window.location.href='b.html'", 2000);* l4 u3 j7 R! A6 o3 }0 N8 b* C d
//下面两个都可以用/ H: ]5 h! _% y% \, u
//setTimeout("javascript:location.href='b.html'", 2000);" v) f) n3 T4 `: d2 k5 ^
//setTimeout("window.location='b.html'", 2000);' |/ R0 c" d9 }" S* Z
</script>

复制代码

例8:

<span id="totalSecond">2</span>
P. P4 p5 {- u& f+ A/ ?
<script language="javascript" type="text/javascript">( Y7 @ G) m" A) ~1 r8 J# ?( ]
var second = document.getElementByIdx_x('totalSecond').innerHTML;
! m/ A& p2 d2 h! K) f' x. ]
if(isNaN(second)){
, E5 }) w3 X" N* F) W- i4 e
//……不是数字的处理方法
- t. i$ ^( P5 v; f2 e
}else{2 B z5 g3 ^- `5 U
setInterval(function(){
& G! T D% `9 J# O: k! {( `: _
document.getElementByIdx_x('totalSecond').innerHTML = --second;. z& C' v/ A" t$ N Y& \
if (second <= 0) {1 H8 Q. U4 `5 y5 w
window.location = 'b.html';( D; ~) B% Y8 U3 S) e
}- C( t; D5 G8 e {$ w! G |
}, 1000);
4 ?7 c0 X. N4 r* B+ \
} ) i& w3 s8 V. t% z; t: @, b& B
</script>

复制代码

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

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