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

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

1，只执行一次的定时器

<script>
2 i2 S: _$ v0 d( b( H
//定时器异步运行 . V8 I* l3 {6 K) s$ w& M' }+ P
function hello(){
4 J& R( S1 H3 i, _+ T! |2 E% a
alert("hello"); / r4 V7 x# [6 r# \: \- z
}
) n/ H- @- ^3 L! M( E
//使用方法名字执行方法
. Y$ m; d! B$ a$ w$ j0 y! o
var t1 = window.setTimeout(hello,1000);
, \ B5 b/ X5 m1 l
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 8 V& q i& w4 m* q6 n; A
window.clearTimeout(t1);//去掉定时器 0 V* f0 c% Q: L* z& F
</script>

复制代码

2，重复执行的定时器

<script>
0 }' S$ a. K4 B; y' ^. o
function hello(){
& v. Q$ H; e2 P: M* y
alert("hello");
0 F* y) \6 V, j @' n: v" K
} 9 g; o. I/ T1 @4 A
//重复执行某个方法 / T2 F2 a6 z0 H7 e" F6 s3 P1 c' j" u
var t1 = window.setInterval(hello,1000);
: H. F( d* h. m- ]
var t2 = window.setInterval("hello()",3000);
: @$ e" ?5 j/ U+ o* D/ n1 K' z
//去掉定时器的方法
2 m, R" R( A% g3 }( A) Y+ g" u4 [
window.clearInterval(t1); : u5 i* n6 w; V7 E0 y4 L) a
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);$ c4 s5 \9 a! s& z+ q
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成6 |" ~3 g; c1 M
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
+ m' p3 G* g) h5 G9 L) T k( U F　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。/ Y: S( f% s+ f9 Z% n
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，7 G5 v; v! y+ ?# f2 t$ W% _6 }
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
' @3 h) G Z( @7 ?+ S4 h比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。7 n% u0 `; R. K; e# C. q; U3 E
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.- A1 L" \8 O8 H4 L
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象7 j" | d( d$ b; }0 @
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
/ H& L! o7 g: P: A$ t例1.表单触发或加载时，逐字输出字符串

<html>5 j6 T7 c. X. E# q
<head>8 X# g# Y! B" z4 }7 u/ M# t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
: E5 X& z- s& I& \3 d
<title>无标题文档</title>9 J' c% H) O" F0 {' h
<script language="JavaScript" type="text/javascript">
7 H6 t( i% O5 k0 A! g
var str = "这个是测试用的范例文字";
+ y1 d2 U" f& a& ~' d
var seq = 0;- A ]4 K, b% o. G; S2 S4 k3 [1 o
var second=1000; //间隔时间1秒钟
3 l4 i3 {5 Y, @+ p- q- O
function scroll() {: Q! X1 j0 \5 m, f4 a, c
msg = str.substring(0, seq+1);' g3 e. s/ r/ k
document.getElementByIdx_x_x('word').innerHTML = msg;
( g8 p, X" A& y% k
seq++;5 f# ^) c( u6 Q; l% j, ` ~- F
if (seq >= str.length) seq = 0;% Q6 Z ]0 V4 O8 ]
} J# Q& E$ D2 h6 J& ?6 x0 X, g+ s6 j; G
</script>
$ Z7 v/ ?' n# Y' L; O2 p: ^
</head>6 z, y% V6 r5 F: Y1 x1 p
<body onload="setInterval('scroll()',second)">
; ~8 d7 g+ _* m: Y" N8 V. N1 o/ k
<div id="word"></div><br/><br/>: h) {9 u1 p6 o% x, A( h
</body>; c, O5 Z; T' r8 Z% y u5 a# S4 T" Y
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
! z, O4 x! _# B" h" I
<html xmlns="http://www.w3.org/1999/xhtml">
E! j! H2 @; G" o6 H
<head>
2 J8 S3 H$ y( v- {0 [
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />( u `; H1 ?/ c( d9 Q2 m
<title>无标题文档</title>
: L3 {" \! q; ^9 M: }
<script language="JavaScript" type="text/javascript">
6 P$ ]# l1 M8 A. i
var second=5000; //间隔时间5秒钟+ E W7 Z! y3 F6 J) r( ]
var c=0;4 i8 Q$ M' W( j4 h- {/ A
function scroll() {
3 ]3 H+ a# ^- [! d3 @- Q
c++;* s# B/ S9 Y- T! v% |4 Z
if ("b" == document.activeElement.id) {
, ?! b) ] X! f: c1 x5 s; C3 Z
var str="定时检查第<b> "+c+" </b>次<br/>";9 Z& q4 f. N* }5 N& T% l$ Q
if(document.getElementByIdx_x_x('b').value!=""){) T! m' i7 \' h$ O1 X5 \: X& x$ q
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";* E t! T7 B: L- a1 i7 v
}
2 K5 j4 ?* P0 }
document.getElementByIdx_x_x('word').innerHTML = str;9 g$ m( q( h& W0 W$ _
}6 Y9 m, Q9 A' I i& w1 P) h
}
0 P: f# U; L+ c7 t* T! h
</script>
/ K( g3 ~) I" W
</head>% V) G2 H) b+ j( r( {4 s/ v
<body> d2 j+ `4 o& @, E/ k3 R5 e" W8 U
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
# S7 m9 s7 x) B3 ]' g l. Q! C
<div id="word"></div><br/><br/>
. f: _. @- s3 n7 S) [! X6 C
</body>+ F% t# m+ P E
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
' g% v/ f3 a, f" b2 {5 F+ ^1 \
<head>
0 f0 H& R- U7 k
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />2 H, k6 U% \" {2 ?7 }
<script language="javascript">6 f9 F G5 I- r
function count() {
. V8 q, M- `! @) w" Y/ ?
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
, t; ?: l9 c2 z& n
setTimeout("alert('十秒钟到！')",10000)$ F* S. ]7 T# e" C; p" ?
}
3 h' g5 X% F4 i% y! w4 L! s+ w! R
</script>4 F; u6 U, N/ q, j
<body>5 {& P8 a# l' R4 v5 K8 Z
<div id="m"></div>
( ^- E% K2 @4 o) O0 o2 |5 x. c0 K
<input TYPE="button" value=" 计时开始" onclick="count()">2 G. ?" Y! U, \( k8 f5 v# T- I
</body>3 n3 ~) l1 R) i% ]
</html>

复制代码

例4:倒计时定时跳转

<html>8 b4 t+ v# K" Y f% \' E8 N/ @
<head>: ?2 }. @1 ^; o2 I# C7 `6 y% Q
<base href="<%=basePath%>">9 }% o/ p8 x) c# j6 s# m
<title>My JSP 'ds04.jsp' starting page</title>
4 R2 M5 n% T6 W4 u) k# I: p( w
<span id="tiao">3</span>0 x# ]+ h9 j* |% E8 a6 R
<a href="javascript:countDown"> </a>秒后自动跳转……
) V5 g9 {+ i: S9 A* b [: y
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>9 d S9 w% b% l3 B8 a* |$ K( E& u
. x( p% R) \# q' R
<script language="javascript" type="">
) ]3 g. ]8 J* N( {7 J4 l3 \) Z6 n
function countDown(secs){7 b. i2 } k9 Y6 t. }9 T
tiao.innerText=secs;
) L' _6 |) ]5 z! z3 j2 P- z
if(--secs>0)
* X! i6 D/ P: s1 }: ~8 V
setTimeout("countDown("+secs+")",1000);
! l8 i$ m6 j( g5 F+ Q# t/ |$ t/ ]
}
4 S! @0 Q, V% U- r
countDown(3);
# W$ G( z m; D2 o
</script>
) L3 w, r7 R7 A$ t9 E* k3 T7 }
# ^+ K& m# G# }: h9 _6 J
</head>

复制代码

例6:

<head> $ i8 u/ j Y- N, _# D0 m
<meta http-equiv="refresh" content="2;url='b.html'">
8 r" q7 X5 Z, ]. k. m
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
4 U) d% ~( r4 l
setTimeout("window.location.href='b.html'", 2000);3 K8 E* Z2 Q- L( J7 k
//下面两个都可以用
! E4 i5 N' Z, v0 B& J4 a
//setTimeout("javascript:location.href='b.html'", 2000);) P$ n4 h( O n
//setTimeout("window.location='b.html'", 2000);5 T" O" N5 B9 c9 [) Y% C% Q6 A
</script>

复制代码

例8:

<span id="totalSecond">2</span>6 _: K6 t+ s6 Z) f0 X6 F: v
<script language="javascript" type="text/javascript">
* }( E" U5 r5 A( y
var second = document.getElementByIdx_x('totalSecond').innerHTML;
4 j* O5 {8 u- F0 b. E
if(isNaN(second)){
$ n! G$ J' a3 q/ g
//……不是数字的处理方法" V) `2 O% b! i) W/ v3 `$ |1 k
}else{
' |2 z, _% s: S* r) m+ S
setInterval(function(){7 B+ x& f% R0 X+ Y0 ~
document.getElementByIdx_x('totalSecond').innerHTML = --second;" z Z6 q, }% i6 S
if (second <= 0) {, y$ \% [: m9 G, d9 U
window.location = 'b.html';1 x! [( G/ P, V8 {" L# _8 H/ p& Z
}
! ?: |0 P3 A* |( Y9 ]' t
}, 1000);2 U' J. s+ s! b, L# h2 V: e9 g2 ?
}
* F A7 y! e6 O) R* i, J7 f
</script>

复制代码

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

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