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

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

1，只执行一次的定时器

<script>
0 U, H E+ F$ A) q6 p
//定时器异步运行 : J5 k5 P, |* S3 n; _
function hello(){ & e* [* e9 l2 {. W3 e& X8 `3 a
alert("hello"); ! d% w. X& r9 d: ~* y5 B. E {
} 1 z4 P) C5 f: f8 s
//使用方法名字执行方法 ) x' G2 s) Y& _
var t1 = window.setTimeout(hello,1000); . ]9 i" m' e& ]* |, ]$ R9 V
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 + u2 {2 z& J4 X% _# I
window.clearTimeout(t1);//去掉定时器
( a5 m: T9 |* `5 J9 ^% c" v. u
</script>

复制代码

2，重复执行的定时器

<script>
4 e* y5 L% K1 q1 _/ }. i; @
function hello(){ ) d) @8 ]* L' `$ H. E2 g. v& q8 W
alert("hello"); ) {, A2 ~. {1 z8 h0 Q2 K& w
} 7 g; G2 q9 U$ t H
//重复执行某个方法 2 ?/ d4 p+ l$ \5 P4 Y+ I& p% s
var t1 = window.setInterval(hello,1000); - g; Y3 f: z! d/ `
var t2 = window.setInterval("hello()",3000);
: q8 e$ M; ]0 a- B# ^* `
//去掉定时器的方法
1 x0 m: K1 R- ?$ l8 ]5 t4 H, e
window.clearInterval(t1); + S$ M7 g; t W! _
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
+ Z1 z% h A% k! V/ o2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成2 y3 t3 }( W+ Q1 }! \
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
' A! |" A7 W5 f5 T　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
/ W3 ]9 j7 w& b0 D/ ]/ d, o比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，) `/ E( Q8 I& Q/ w
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。* q: n* f- a$ y, u" G& B' y
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。: K+ ~9 L: ?9 h1 \6 n3 a
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式. V, A4 v9 z, x
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象) z7 j9 k) m- l, w
clearInterval(对象) 清除已设置的setInterval对象

略举两例。5 j) j; G6 ^3 @; c- p6 E# M# D- ~
例1.表单触发或加载时，逐字输出字符串

<html>
! D- _5 N% V. U p
<head>
2 `. c2 R$ D. N2 F
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) o! ], P+ ~/ C% ?
<title>无标题文档</title>) C9 g, ]0 d( {8 G
<script language="JavaScript" type="text/javascript">! R; v5 [4 O% ]2 V( A
var str = "这个是测试用的范例文字";
+ J9 v9 S3 a0 c. Q3 G9 R. Q6 l
var seq = 0;" L2 D+ J) G. ~# i( K; r
var second=1000; //间隔时间1秒钟! Q1 w9 _& @% B. C& Q8 a3 Z1 ?
function scroll() {
; d7 T' [2 ]) G( ]! h
msg = str.substring(0, seq+1);* k" r( P2 ?$ g( c
document.getElementByIdx_x_x('word').innerHTML = msg;8 u/ S+ Q$ K- j
seq++;
% z- S$ t" W# N9 G+ n$ `$ r
if (seq >= str.length) seq = 0;9 ]; O( C2 J$ w# T j9 v6 L. |
}
% _. |6 V. |9 Z7 [- X D# I
</script>
# [0 }+ _7 e9 V. e; n3 N" f( C; V2 |
</head>$ ^! x* a5 O3 h5 E
<body onload="setInterval('scroll()',second)"># m' \( |6 D# v2 H4 V% t0 O/ o8 @
<div id="word"></div><br/><br/>
+ Z& x' d+ {) x! s4 Q, K/ n
</body>
; c2 q3 p- I* [7 O. R
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">+ t6 I0 N9 b- ^* r
<html xmlns="http://www.w3.org/1999/xhtml">
+ x8 v$ }# k" e4 A
<head>, Q1 H M0 K- H _" H3 f
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# J* k/ u& J4 X- M! K9 I
<title>无标题文档</title>
8 i+ q2 W p. I: K# y
<script language="JavaScript" type="text/javascript">
4 E p+ r' e6 r- I; s# F
var second=5000; //间隔时间5秒钟
& s7 t: G1 J2 d# s7 Z0 F
var c=0;% I) x {2 A, D* {3 m. n
function scroll() { {, i3 f) K; A& v* y
c++;( a' T$ _ K( F& q
if ("b" == document.activeElement.id) {
" v4 }( Y3 A1 t" E5 E2 m) W0 L
var str="定时检查第<b> "+c+" </b>次<br/>";* n" T2 U, E4 h
if(document.getElementByIdx_x_x('b').value!=""){
* l! o0 l+ h8 Y- e0 `
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
; `9 I+ K. y1 U6 o; _4 ?0 M
}
! W" `0 E$ d3 k+ S2 m& V$ K" Z
document.getElementByIdx_x_x('word').innerHTML = str;) v) }. V/ M3 [8 v) Y2 _$ d' |
}
7 I7 w# k; A) Q
}
- P9 F; e1 U; r6 H- j* Y
</script>
: f/ C( }) B% g- R
</head>
1 z! l6 Z5 y4 L3 i
<body>
, G( [- L% Z6 R. W& x* |
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
# L8 n. C) g ~
<div id="word"></div><br/><br/>
; X7 V. [ h) K
</body>
% S* I+ W3 f% F# |# d2 U
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">1 m9 t0 H" o6 I3 p' Q" ~5 b
<head>
. u" j& [, e: V
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 S w; [, }9 v* X% i5 ~+ I$ }/ |! X
<script language="javascript">( l" _0 j# Y3 h; p3 w o4 |' v
function count() {
1 `/ A# j- c7 c# ` j
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
. G# m' h/ P6 k
setTimeout("alert('十秒钟到！')",10000)3 ]7 T3 O5 W, | o3 }+ S
}
, Q6 u1 y, X/ J$ D
</script>2 @4 t1 c% p3 @) }4 K
<body>, x2 } f% h4 U. L
<div id="m"></div> `+ Z$ N# _& [) A- r+ }! E. {
<input TYPE="button" value=" 计时开始" onclick="count()">, {+ @% b$ ?* [) W( g( S S# o# h
</body>: Q( G! }& [$ d7 {+ A
</html>

复制代码

例4:倒计时定时跳转

<html>' ^6 F, |7 Y( ]0 [, l
<head>
6 k) I1 `1 A) U& m/ O1 U$ j
<base href="<%=basePath%>"> s6 z2 N0 Q7 b; L' n
<title>My JSP 'ds04.jsp' starting page</title>' {1 g0 v- P6 D% E6 U `
<span id="tiao">3</span>3 U6 L* k4 ~4 T& [0 x/ u7 ~4 w
<a href="javascript:countDown"> </a>秒后自动跳转……( g2 B; M( k& [; G4 C, k) D/ u( B1 _
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>% |* {, }! Y Z
) h# f2 U, m" I/ q$ y0 U
<script language="javascript" type="">
6 M2 S- y4 X6 \% I" ]" t
function countDown(secs){# N0 }8 {- m+ J
tiao.innerText=secs;! M/ m# C' t; k' l8 p
if(--secs>0)! D+ ?! H/ [) C: \1 Y* `& ~5 o$ j
setTimeout("countDown("+secs+")",1000);( E+ d0 ~) L! W) D
}' U* L3 U, G9 U4 g, K6 K+ ]
countDown(3);0 ?- W* S1 w9 ?/ m4 R5 |( o
</script>
0 \5 e4 E, f7 d' e! b- m2 e
/ V9 x [7 j( a9 d
</head>

复制代码

例6:

<head> 7 f; t* M1 a( }( C( j* e
<meta http-equiv="refresh" content="2;url='b.html'">
- B9 s0 K3 m1 `- m
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">; d2 }' }0 n- C& t" I5 S
setTimeout("window.location.href='b.html'", 2000);
* v1 c, b6 u' \1 n2 @) ]
//下面两个都可以用
% t @6 s3 Z: y+ m2 U: N2 x
//setTimeout("javascript:location.href='b.html'", 2000);
, s2 I/ i: _, D) K7 w
//setTimeout("window.location='b.html'", 2000);
2 W# P/ u( r0 J9 U5 e" [
</script>

复制代码

例8:

<span id="totalSecond">2</span>
& \$ k0 }3 ~( |, a& n* H
<script language="javascript" type="text/javascript">
: J) [; u' c4 V7 f' R
var second = document.getElementByIdx_x('totalSecond').innerHTML;! f& W7 M W; d! k5 J0 o& d3 m: p
if(isNaN(second)){
8 I z& }& M6 J9 R
//……不是数字的处理方法
3 I$ ~4 a0 U2 v2 K9 s" a1 F
}else{7 _+ U8 B% Q' K1 o) o
setInterval(function(){
5 I. G8 x! M& H2 n
document.getElementByIdx_x('totalSecond').innerHTML = --second;
: I( x. v5 K* G+ @0 S
if (second <= 0) {
- ?2 V! ~# v! ]/ u8 N3 G9 ?8 o
window.location = 'b.html';, y) q `6 o6 s
}/ o% ?) S0 G4 U: Q3 h
}, 1000);, t) k; `9 v: `2 O2 b! B! U0 N
} % f0 U S( I2 H; O5 ~+ }
</script>

复制代码

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

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