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

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

1，只执行一次的定时器

<script> ; K/ z: v3 V9 z& d& r# H
//定时器异步运行 2 i* {1 b: b8 |6 i& Q9 ~
function hello(){ : D9 Q" q% W8 d
alert("hello");
: b9 Q7 y% n0 L: y) L' n
} : }/ _+ ~3 l1 v, w, D. n
//使用方法名字执行方法 . H# Y8 A4 h2 Z- E7 Q T
var t1 = window.setTimeout(hello,1000);
* R* ~2 g# y3 }0 K7 D- k: X, W
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 / L+ _4 L7 q W/ u7 L+ t# u
window.clearTimeout(t1);//去掉定时器 & O" D2 N# w/ k- I, X1 `
</script>

复制代码

2，重复执行的定时器

<script> % w; H$ x5 E/ j8 b6 n/ L
function hello(){
3 R+ P; V1 s! M3 S5 T- F% H
alert("hello"); * u7 g- J$ y [4 M* g$ D; K* {
} - J6 ^2 H+ X% v" M% t& R# j6 M
//重复执行某个方法
. s: {4 l( V) I) B0 Z5 r
var t1 = window.setInterval(hello,1000); 0 l- j7 B$ C. R9 ^% \# P, _5 ^- C6 e
var t2 = window.setInterval("hello()",3000); * w* E5 T+ U* q5 x; G
//去掉定时器的方法
, d0 w! ~8 P! G1 o! M
window.clearInterval(t1);
+ P- o; K- a& P+ b9 `$ u P
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);) X) V" T) I) I. n0 _7 D
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
d9 x1 h# H7 A* c7 [“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
' q& o7 V6 v' z; y　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
6 Y2 A* O9 }8 I8 n- A! j比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，7 l6 O% G* C- G. N( K9 P; N* h
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。5 B( Q3 R, L3 _# t/ E* z
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。7 b. |1 e D0 a
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
) _% N6 M0 `0 r& R' usetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
! z! O8 T& J$ B0 wclearInterval(对象) 清除已设置的setInterval对象

略举两例。
7 m* ~% X! f3 y5 M- l. d; G例1.表单触发或加载时，逐字输出字符串

<html>
6 x% x, Y8 s9 W( m O
<head>
; C$ Y# n5 O" T* l" c
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, ?( ]/ D% W( W
<title>无标题文档</title>9 i# y' I, u# ]
<script language="JavaScript" type="text/javascript">5 a4 R$ R/ B8 P% Q
var str = "这个是测试用的范例文字";. _9 u3 d0 n/ O) n
var seq = 0;
) K! y% K, R: f* Z3 v( }6 M
var second=1000; //间隔时间1秒钟
9 E6 ^8 _8 V# ~4 ?0 O
function scroll() {; n2 x4 d1 }$ r7 G3 q$ e
msg = str.substring(0, seq+1);
2 c ^. d* R& z; N
document.getElementByIdx_x_x('word').innerHTML = msg;5 D& C6 a' ]$ ?1 f+ h
seq++;& w. t( A0 {" S/ Y& I
if (seq >= str.length) seq = 0;
, q- o0 [3 J9 n* W1 d" k( x
}3 |+ `% E$ o( b# g* a2 [% m
</script>
9 i$ }' \, f" j2 I: J5 U* K9 H& B% x
</head>- x7 E& a0 P, X- j% G! @
<body onload="setInterval('scroll()',second)">
5 p! T F, I9 O) M* B1 J% L
<div id="word"></div><br/><br/>) ?. F$ \6 |' u6 S
</body>
; c! C! d% J& t
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- J# E2 f+ \% B
<html xmlns="http://www.w3.org/1999/xhtml">5 n* B( O6 v% X3 K
<head>+ W! j L- @- u% e
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />* o( S3 W7 S+ M8 a% @( S
<title>无标题文档</title>2 e; j% d6 z( E- r+ i
<script language="JavaScript" type="text/javascript">
* g7 Y5 R# z6 j. z/ u- C
var second=5000; //间隔时间5秒钟
/ R: z1 o, @: z, z4 [. x2 X
var c=0;
# t* E4 _7 } e
function scroll() {
, P6 ]7 C) u1 L. t" T9 L
c++;2 a$ J4 H$ j# e! l" R
if ("b" == document.activeElement.id) {! N( ~( }% p# r3 a* n: H3 ^
var str="定时检查第<b> "+c+" </b>次<br/>";
9 t! ?# {; D' c. ~! w1 u/ ]
if(document.getElementByIdx_x_x('b').value!=""){9 |$ K* G2 L& V: j+ _& x: l
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
5 {& Z/ L! \+ ]: P _
}
1 t) E) I( [+ ?2 y( ~5 V9 l
document.getElementByIdx_x_x('word').innerHTML = str;
+ I x2 F5 s9 _4 B$ a; D
}, K- j; e! q: b, H
}
: E$ w% e' o3 U' G
</script>: \9 p W. T$ G$ W3 G+ v6 X3 E8 K
</head>5 L. y# ?6 G' f# |1 M
<body>( |" w8 ?& n2 N B/ f$ ?0 \) i* s8 ^
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/># i) [5 @9 v: C* U: O: @
<div id="word"></div><br/><br/>
q$ s! X) w1 n' R- M
</body>: q6 U2 @, S2 w- I w, }
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">, f: T3 Y& m7 d$ ^
<head>9 z3 I/ V% T+ n# s! c5 w# h
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) _) R6 m4 T& i3 O/ M1 l. s
<script language="javascript">
3 @( ]8 Y; \- J0 s& R
function count() {
' s3 k) [" X; N6 k s& d5 e& H# v
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";+ q) h3 V5 F1 X- S2 Y$ H& K
setTimeout("alert('十秒钟到！')",10000)
2 l' N. y* T5 l; S7 s# r. i+ u
}+ T5 e) q: J; N& v9 `& ]' X
</script>
! E9 U6 O8 W& N( [6 p
<body>5 Q4 Q3 W3 @" o; {
<div id="m"></div>9 c1 J! {6 j% z( ^
<input TYPE="button" value=" 计时开始" onclick="count()">
, t3 |& P4 }' H
</body>
5 H ^& d; c h2 Z
</html>

复制代码

例4:倒计时定时跳转

<html>
- ]4 {! { i L( f% n
<head>
# D: l% t& K! j- I6 s5 u, p
<base href="<%=basePath%>">
$ i T, ^, s2 ~# W* c
<title>My JSP 'ds04.jsp' starting page</title>) E8 [! M6 J7 m% C4 a
<span id="tiao">3</span>6 h* f |) I( G9 j. U0 E- \
<a href="javascript:countDown"> </a>秒后自动跳转……4 F/ u: f! A- O. U1 O0 U1 F; Q: V
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
/ v- h% ~& x& J+ n; V7 }
$ Z2 l1 o1 j$ ]/ j# L% S$ a X
<script language="javascript" type="">
; _* M. x& M3 g P i" x
function countDown(secs){
2 U: F; [, z- @& R1 l
tiao.innerText=secs;( E% E- k/ Z# H* A/ x; z/ `" v/ U
if(--secs>0)0 O( a4 `; W% Y4 T* N, t! @, i
setTimeout("countDown("+secs+")",1000);
: |: J) T8 l* W
}
7 M# y4 o* y2 W; P3 V4 X
countDown(3);1 p. {, [) H" S4 O# N& O
</script>
# O3 S! d- x m
* L5 q* j1 u/ O3 a* _; E
</head>

复制代码

例6:

<head> / z4 i+ d0 _6 b* `& E- j
<meta http-equiv="refresh" content="2;url='b.html'">
" f7 S: n6 }+ |& R$ j$ K# ?5 v
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
g( N/ [5 v4 t3 f8 V
setTimeout("window.location.href='b.html'", 2000);
4 J0 B# h5 ?; t) M' d ^
//下面两个都可以用
$ W# `: H+ z9 s- U
//setTimeout("javascript:location.href='b.html'", 2000);
' L9 {1 v4 ?$ ?- `3 _& G' M/ W
//setTimeout("window.location='b.html'", 2000);
9 t" ~- }/ j7 t4 c( j% @: y! s
</script>

复制代码

例8:

<span id="totalSecond">2</span>
& O0 T( i& |" p4 I1 r* U# Y/ t
<script language="javascript" type="text/javascript">% q' |8 _! u& H/ V: B$ t% C( @
var second = document.getElementByIdx_x('totalSecond').innerHTML;
( q% ~( l D; k* Q9 z
if(isNaN(second)){ Y# D+ z( ` A q( ?6 P
//……不是数字的处理方法6 o3 L1 V) D# m: u5 J9 q; Q
}else{4 T1 U# H k9 d- I
setInterval(function(){0 t- k0 T8 S/ ?7 Y. l
document.getElementByIdx_x('totalSecond').innerHTML = --second;% N/ W% |1 A0 g3 ?) a$ m
if (second <= 0) {
" O: M$ S2 [8 T* r6 |
window.location = 'b.html';" G& W# i' ]4 a+ a' G% ?2 b: ^
}
! R! W" i" D) N5 ]& @
}, 1000);
0 r$ b f1 f9 W, V! y
}
( j& |# W( {! ^' v8 j# b
</script>

复制代码

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

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