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

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

1，只执行一次的定时器

<script>
; f- T4 t' y" `* m
//定时器异步运行 ) A$ |. r) k7 {0 h4 a
function hello(){ # l/ p" E3 s9 i
alert("hello");
+ a9 h. I$ D7 Z8 T0 w) h* ]
} ( S7 ?/ T. p, L' E$ m1 H
//使用方法名字执行方法
5 ^5 u# N5 l/ I$ J# i; y" {: w
var t1 = window.setTimeout(hello,1000);
) j, h, k5 n) Y- l. A8 n
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 # v: K" J5 u! V" u
window.clearTimeout(t1);//去掉定时器
6 z! O2 n, l9 }8 J/ n
</script>

复制代码

2，重复执行的定时器

<script>
1 h. b3 y2 o( U0 @0 E
function hello(){
" b" J/ n4 |8 O
alert("hello"); L) m% v4 j/ f
}
) B: M! x4 r5 V; O8 u
//重复执行某个方法
/ d% i6 y% }8 t
var t1 = window.setInterval(hello,1000);
+ V/ s3 q7 k! {
var t2 = window.setInterval("hello()",3000);
/ w1 ]6 y$ c/ i! L
//去掉定时器的方法 2 L. ?- n4 l9 M9 j
window.clearInterval(t1);
3 b a7 X) L6 o+ N o; Z8 Y
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
% k7 ~, [: }4 L! \% I2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成- M& r' h( W5 P; b3 }% o6 V3 v( n& ?
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
/ i O+ Z; z9 L　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
9 e8 d! R8 i" Y# x0 T/ H比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
2 K+ P% M3 ^1 M0 v3 A* v/ ]; D则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
* b8 _' D7 M3 H: s比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
, ]* w& }& A1 M0 Y2 J. y \1 IsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.. I3 }% @! o3 c" x
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
9 W Z: \8 L6 e( bclearInterval(对象) 清除已设置的setInterval对象

略举两例。
' y+ A- i1 H" B* ?7 U& w: A例1.表单触发或加载时，逐字输出字符串

<html>
3 ?1 o" g5 ~4 f% u. I
<head>
- {9 g! Y K. e7 A
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
% D0 |; H8 a: S6 @. O8 d8 b
<title>无标题文档</title>9 z3 B5 J/ h* R H
<script language="JavaScript" type="text/javascript">
2 e' N6 t f4 c4 h6 g. g
var str = "这个是测试用的范例文字";, k7 _. U/ G5 B$ l$ J5 z0 ]9 n) R. E
var seq = 0;
" m9 O* W; J7 t$ e5 Z5 H
var second=1000; //间隔时间1秒钟9 i0 T) S+ b4 x9 s! w
function scroll() {0 K, o7 Y. P. ^" N; \9 f, |/ L
msg = str.substring(0, seq+1);' Y: S" U$ b9 R8 q! |
document.getElementByIdx_x_x('word').innerHTML = msg;4 n& |! A* }* m' t
seq++;
6 h! k6 U3 w9 f% b9 J
if (seq >= str.length) seq = 0;7 e7 U0 \2 }2 w( S' H+ P2 P
}5 V. q- Q& Q. l7 B4 B: w3 N$ p
</script>
( L8 T @) a% j% W# w$ x2 n
</head>
7 O. ]* K2 r0 C8 f& U# ]
<body onload="setInterval('scroll()',second)">$ j6 M; c- j) x' z# k
<div id="word"></div><br/><br/>
7 s! h; F# }* V" W2 ]* n- I# i% s
</body>- [0 {: H- g8 }8 a+ _, r5 |7 O
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
. m+ \! c* [+ M1 u9 \* R& X( A
<html xmlns="http://www.w3.org/1999/xhtml">
( H6 m* w& J* p B
<head>
+ b/ B3 d3 M% r: q3 N! X, W
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 U! N T+ q; e$ X1 Y" U6 ?
<title>无标题文档</title>
- C5 g% J) y+ w: [8 i0 ~ E
<script language="JavaScript" type="text/javascript">
! _1 \0 |& v- y; |' O0 |
var second=5000; //间隔时间5秒钟& C( ?* ]; V& B% H
var c=0;9 K2 n* M. f: A% u1 _, H, P
function scroll() {
% N8 h& n/ ~+ m# }" Q
c++;
2 D8 b$ x' z' k+ Q8 u: x& D
if ("b" == document.activeElement.id) {9 K, O+ F! V. y
var str="定时检查第<b> "+c+" </b>次<br/>";
6 c9 f' a4 x) t
if(document.getElementByIdx_x_x('b').value!=""){
* r& ~/ h) ~: a( L( k
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";+ i+ N2 A. u( W
}
# q& O e: g& c0 d
document.getElementByIdx_x_x('word').innerHTML = str;
: }' }7 Z1 e p& Q/ `5 G
}
. g" x7 D1 E1 m& T4 }
}
% f& X8 M* s) a+ F. L% x
</script>
- c+ e4 M$ s2 j7 X/ K# Z" j4 A
</head>* A! g7 r' L* W( H9 h" g/ [' K1 ?
<body>
5 I& t1 ~; H% R& t4 Q
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
. ?4 A0 M# p4 N* S1 p% @+ l; ]
<div id="word"></div><br/><br/>
$ Z0 o/ m+ n- n k5 B4 n
</body>, I6 e {1 H* i! G" F" k
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
8 g" y* Z+ S! K6 `
<head>
, ?$ z: I' a1 P% H
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />& l6 N" Y" j1 r4 A6 R2 K: ?' g4 D
<script language="javascript">, ~9 b0 g* b: @; A
function count() {
# s2 _5 P1 z- O& \, f
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
8 d, J, E- z. M w& `- w& |
setTimeout("alert('十秒钟到！')",10000)% p: M5 z0 k/ \3 K8 D
}
$ ]/ E" M4 b8 ~7 |/ p" T8 n
</script>
+ w* Q% L# E( v1 t
<body>
0 U4 @$ \1 v; F
<div id="m"></div>& h. d' }- ]( `% S+ l
<input TYPE="button" value=" 计时开始" onclick="count()">; |0 Q! M! n4 g7 m
</body>
. E+ M j5 K5 k; N! M; T7 q+ a
</html>

复制代码

例4:倒计时定时跳转

<html>
4 U N5 w! ]. P
<head>7 U ?0 N' B: R$ u h' ^* k6 t! s
<base href="<%=basePath%>">
T& P7 F8 {- u7 K; _
<title>My JSP 'ds04.jsp' starting page</title>' C8 Y" p$ E5 F7 a( U4 a9 G- q
<span id="tiao">3</span>2 I( d- d9 I8 r, Y8 _) k J, f8 b( S
<a href="javascript:countDown"> </a>秒后自动跳转……" H' A' n0 z& d% P( L
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>7 K8 z0 @& H+ F0 `3 r8 j& v# |
4 A' V+ @; e$ k3 G+ f& L" C
<script language="javascript" type="">& d% `- r% `: ^) N
function countDown(secs){
- h( `# [" C2 n$ L j& o0 \
tiao.innerText=secs;
+ f2 v. y5 E1 {) Y, l! {" Y
if(--secs>0)( Y/ \: G& {! X- ?/ m8 P
setTimeout("countDown("+secs+")",1000);4 i7 I+ b. s& u( _' d* f4 F
}9 o0 H& U) t1 B* _! h% R
countDown(3);4 Z$ `8 K2 R5 b6 Y
</script>9 e- ^: _, j" q1 r
) |2 B5 u5 y9 o" a+ Z
</head>

复制代码

例6:

<head>
, P4 Z; ?/ I4 k6 ]' q
<meta http-equiv="refresh" content="2;url='b.html'">
' ^6 {6 O! [. H5 ?
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">% ^1 e0 j7 A- w
setTimeout("window.location.href='b.html'", 2000);0 d. @2 ?6 K9 K7 R+ I+ d8 q
//下面两个都可以用
, j$ E5 f. l3 e. H4 n3 {- t
//setTimeout("javascript:location.href='b.html'", 2000);
* C0 h7 h: r9 d
//setTimeout("window.location='b.html'", 2000);1 ]* }, \0 p9 @1 _ Q2 S" Y
</script>

复制代码

例8:

<span id="totalSecond">2</span>
( @ s/ C7 N8 m Y, T
<script language="javascript" type="text/javascript">- Y* M# T: A; R; G( b4 N; g
var second = document.getElementByIdx_x('totalSecond').innerHTML;3 D; [# t% u7 f' ~
if(isNaN(second)){
6 l1 a3 P! h, i. x
//……不是数字的处理方法. Q* O1 G, G( s! A: q% h4 ]
}else{; S6 R( P1 P' ` Z
setInterval(function(){
: E( c/ W* g3 n4 ]- v o& }
document.getElementByIdx_x('totalSecond').innerHTML = --second;
/ c) ^4 r- j2 ^( m( X C
if (second <= 0) {, n# Y7 j4 \/ j( S
window.location = 'b.html';
4 c4 m8 z) v6 z6 Q9 e$ R
}" ^3 X2 `/ H0 [
}, 1000);* T7 s# F! p- r! b5 |. V
} 8 u) ?; ^* v% o8 \% x4 s' R! `
</script>

复制代码

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

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