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

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

1，只执行一次的定时器

<script>
$ x0 D# G" S5 `
//定时器异步运行 $ x) i9 _) Z& R) U% t/ t
function hello(){
) r$ Q* F. R, [; I2 u( t
alert("hello");
) ]4 d# Y: @9 p/ W5 k7 O# j1 l* P4 h
} ; R' `2 ?6 d$ W
//使用方法名字执行方法
0 P) Z8 ^5 Z5 N3 U
var t1 = window.setTimeout(hello,1000); & [) L( d A# S5 }- p8 c) ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 % }4 G% j5 |+ g y7 {
window.clearTimeout(t1);//去掉定时器 $ W$ f- M7 b- C. s4 X0 f3 N* S& E
</script>

复制代码

2，重复执行的定时器

<script> ) f6 |! b7 F' @
function hello(){
) r" _1 k* D' H" w' V. a
alert("hello"); $ U, P# i- [& n" F6 G3 V- J' z
} C* Z0 f' G% q9 u0 N
//重复执行某个方法
: H" y5 o$ f) X& _5 P
var t1 = window.setInterval(hello,1000);
, A* Z! z# ?1 N- ^% e
var t2 = window.setInterval("hello()",3000); : ]! X$ N1 s. j& [% A7 N
//去掉定时器的方法 2 _0 M3 k! s/ h
window.clearInterval(t1); & _9 y3 @: R/ u6 c( K! m5 v
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);3 Z5 V1 H7 }( q3 \3 i
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
n* O& M, |0 j$ p9 ~( ?“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。 @; O' { n1 w; O
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。* O% A$ h6 v8 j$ q
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
7 L8 V2 S; q+ j I1 u4 V8 K则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。& u" s8 b! x) g: }+ f6 O
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
9 _1 W2 g$ j* u1 p3 j, hsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.! k5 E j( A; U' a
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
( d5 b( o! i7 |1 n: k" \. iclearInterval(对象) 清除已设置的setInterval对象

略举两例。
4 ?! y% ]1 S5 K9 {( i% A例1.表单触发或加载时，逐字输出字符串

<html>0 @9 x' J: b* X
<head>
d4 P J5 g3 c% F% t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) w) i" @. b% J" G" o& b8 i7 P8 {/ O
<title>无标题文档</title>& v$ A9 a' b7 y" N- n: }! W2 ]
<script language="JavaScript" type="text/javascript">( H0 q; r/ i3 f3 i' p0 E s& X$ c" `
var str = "这个是测试用的范例文字";: z( W3 j: P& @/ L# J
var seq = 0;
2 H9 H+ a5 ]$ Y" \- _3 M7 o/ O
var second=1000; //间隔时间1秒钟
5 D) p; E4 p9 j. O+ G0 ?8 w* I
function scroll() {
# u# G K6 E* H6 X+ z
msg = str.substring(0, seq+1);
|: w/ v, P0 S+ E
document.getElementByIdx_x_x('word').innerHTML = msg;
0 i1 q# s2 ~" }' v# x
seq++;) X% R& B- U, i! @8 t
if (seq >= str.length) seq = 0;
0 ~. V5 Q @( q$ w0 D" H- X
}8 C! j" |9 ~6 y
</script>
_, t: x5 }" @* x! C
</head>3 U# c9 a: {! t/ M4 d
<body onload="setInterval('scroll()',second)">- h. C0 j$ P1 e; a" Q5 c6 W
<div id="word"></div><br/><br/>
( l8 i: t! `" r2 g2 ]$ e) y
</body># @1 A+ l+ h6 _9 r n+ r/ ~# U4 i
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; n; F, r1 n2 ~# x; x( k4 J
<html xmlns="http://www.w3.org/1999/xhtml">( B9 s( B% I7 ?+ h* `& ]" v/ F
<head>
* M( ~/ c5 v8 o* N
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) A# ~# w, E3 {* Z% Z- `, u
<title>无标题文档</title>
J, y% N6 I: B
<script language="JavaScript" type="text/javascript">( ]) ~$ r4 c) a5 U9 B( S# t2 Z) Y) S
var second=5000; //间隔时间5秒钟
9 P* S3 K, X# A
var c=0;
0 b5 q, u8 B8 f. A8 F7 |
function scroll() {
5 J/ `/ `* }3 K* N3 L. {" M
c++;
: p; _) S& t. L0 j9 j" X& @
if ("b" == document.activeElement.id) {3 H$ `8 X* L r$ y6 [& I- [. x
var str="定时检查第<b> "+c+" </b>次<br/>";0 r5 m7 t8 Z5 I* `. i( i+ i' e4 C
if(document.getElementByIdx_x_x('b').value!=""){) _. v% t% `: Q- T8 a! d( C; h$ r
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
; h. n2 t6 z& \
}
3 ]! `: i2 u" L9 r
document.getElementByIdx_x_x('word').innerHTML = str;9 k" ^4 \% s# \* M7 W4 @) k' s
}
4 I, ~' Z0 d9 I* [% W W) A1 U
}/ H) K. D- f: d: B4 C( o! P
</script>4 u' H! L% j) ]3 }$ [# b
</head>
) u8 o8 ?; U2 G* s& F3 z$ G8 ~
<body>
- n' m* E7 T9 |) x# C
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>; L2 r2 T. p7 O( V7 O9 O5 |, h. ?2 d
<div id="word"></div><br/><br/>
& @/ M: E" m2 V5 \: Q% B# a
</body>" ~) p h5 h& X3 h
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">% C& a9 ~1 J. U) q; l. ]
<head>
$ {* t6 U. r; ]7 w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
8 }( [, r+ r& X# p) L! ?1 ^) K
<script language="javascript">$ G h+ I* ?& j' X+ P, q g
function count() {
% ]6 n0 V8 d o8 W2 T; O3 u. @
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' F2 ^- j, n$ U0 `; g1 r& _
setTimeout("alert('十秒钟到！')",10000)
3 G' O) L' T& C5 X+ u- A B
}! F4 c! B6 t; o% [0 \% a
</script>
* R) u7 `! Q% A1 i P
<body>/ {1 h, v! C6 \
<div id="m"></div>
: { ~' S3 U: H
<input TYPE="button" value=" 计时开始" onclick="count()">+ ~! c# e$ K9 t+ w# A5 O
</body>
h7 V3 w2 `. W6 Z z# m& W5 @
</html>

复制代码

例4:倒计时定时跳转

<html>
' {- a) G6 R! s- {& n
<head>+ K% J/ y3 i& a* W$ C7 H& N3 V- s
<base href="<%=basePath%>"># Q* t5 H0 i7 ~& Z
<title>My JSP 'ds04.jsp' starting page</title>
0 ^1 B6 O3 B0 w, G
<span id="tiao">3</span>3 f1 A/ g: j7 G- k; R# M
<a href="javascript:countDown"> </a>秒后自动跳转……+ n0 J: `$ c6 n
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
; K9 h8 j: h/ Q) m
8 b% D Y3 _% H$ ?
<script language="javascript" type="">% g; [" o" j" \
function countDown(secs){( l3 \% k2 v8 J- ]2 \9 `$ y
tiao.innerText=secs;
7 ?5 l, V. F. J% o
if(--secs>0)
4 f5 T' l5 y: w8 ?6 v
setTimeout("countDown("+secs+")",1000);
3 i6 ]0 G* q0 Y9 x& h! t0 K
}' m: ~* {3 R* T: r
countDown(3);
6 f% K- F+ Q- i) I
</script>
3 N, b1 C0 j3 j- [
! s9 z4 u; u* F) F& n- }5 l
</head>

复制代码

例6:

<head>
9 p" B* v- @, u- p3 }2 r
<meta http-equiv="refresh" content="2;url='b.html'"> 3 q$ s4 I" H. T
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">( P" I! s5 f: Y- G
setTimeout("window.location.href='b.html'", 2000);; q2 w4 l4 j- A1 l2 X
//下面两个都可以用
! \0 n% ]( V3 h4 k
//setTimeout("javascript:location.href='b.html'", 2000);
( {, r6 g/ u& x; Y, _
//setTimeout("window.location='b.html'", 2000);
0 i+ ?5 C! z4 X& E) V6 m
</script>

复制代码

例8:

<span id="totalSecond">2</span>% @4 K1 W6 H2 ~4 `( Y0 g
<script language="javascript" type="text/javascript">' A# D- h# |3 @( L2 Y
var second = document.getElementByIdx_x('totalSecond').innerHTML;
3 M6 G) e$ {; Z' K/ v4 D
if(isNaN(second)){- Z# Q5 U- Z$ q
//……不是数字的处理方法
3 @ P k w4 f1 _
}else{
( X- Y7 \& _4 Z$ ^/ {+ M9 `+ ~: v5 f
setInterval(function(){# r- T* T/ b( S7 m, R, W' ^
document.getElementByIdx_x('totalSecond').innerHTML = --second;! @9 x9 s7 \7 W) |2 @% C5 [' x: O
if (second <= 0) {
, W) a [$ }) u% L0 |4 x7 ~% v" B
window.location = 'b.html';
7 f! |4 b" {: i. s. p' i) }6 s5 k
}
6 J1 \+ r L/ }: x5 T
}, 1000);
% a) i4 [; H) l6 g x
}
- T) C9 h' F! ^+ y! T& y
</script>

复制代码

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

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