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

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

1，只执行一次的定时器

<script>
4 ~& b6 t3 j# D8 W4 _0 Y3 @2 v6 E* I
//定时器异步运行 : w8 v5 \# k+ g) i
function hello(){
9 ~; U9 `& e& F* j0 g
alert("hello"); ' }: Q7 d# ?4 }7 s7 ]4 K
}
; B$ F1 N$ {. z1 d! d, X" S
//使用方法名字执行方法 $ A) B. w; g% S' F n
var t1 = window.setTimeout(hello,1000); 6 C8 q! W5 ~! k3 v8 S
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
: ?9 i4 R5 G8 Q
window.clearTimeout(t1);//去掉定时器 # i0 H. `. H; H
</script>

复制代码

2，重复执行的定时器

<script>
: t+ B! _5 B- V* S7 u
function hello(){
' E. r( T- s! e! G5 V( l: P
alert("hello");
; C$ E* N: b; Q: `5 k
} ! t' d' z L. \
//重复执行某个方法 7 }4 G2 Z9 g3 b/ n+ X
var t1 = window.setInterval(hello,1000); 8 G3 K. x8 r$ N4 c
var t2 = window.setInterval("hello()",3000);
, R v& c* e$ R1 L; j! g7 K
//去掉定时器的方法 & H4 |# v L" D% U: a, m5 B
window.clearInterval(t1);
5 r/ X3 a5 w+ F+ Q: D0 a/ t" X
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);* t3 P+ J4 Y8 {9 m2 ?2 J6 X: t& i
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
- J m I& z, [“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。" g* V, q. J. C% i' M, n* B
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
. U: i4 n( D5 {0 k- u比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
; H8 S1 l" |3 H则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
5 t9 f& x/ v% _5 e比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。 ?) Z5 P& M7 O3 K# W
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.# |0 H( |. }: E8 m1 y- {) Q
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象5 F' G l$ K6 b- _* Q* ^4 l: k
clearInterval(对象) 清除已设置的setInterval对象

略举两例。' p( e" `- t5 ?' M! i
例1.表单触发或加载时，逐字输出字符串

<html>
7 M) n' ?. M. Q! g# K8 l& w: R% r% _* M
<head>, i) i! K( S; R0 f1 [- Q h
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
i% f2 \+ k# L* l5 a& v
<title>无标题文档</title>2 z8 B% V8 [* F+ C
<script language="JavaScript" type="text/javascript">" S5 e: w" ^( U* _. g1 X! R9 u
var str = "这个是测试用的范例文字";
5 R& o1 O' t T2 n
var seq = 0;+ I5 c6 w3 Q/ ~* ]0 |1 q- e; F
var second=1000; //间隔时间1秒钟6 A, u4 @, y+ S1 I' [
function scroll() {
' |3 M% p9 n6 {% c5 i0 A" ~
msg = str.substring(0, seq+1);! J7 M: i; }% \0 B
document.getElementByIdx_x_x('word').innerHTML = msg;* e% z9 x! v5 z& d( b) Z- \
seq++;
, |4 b* B4 ~# f( Z- o
if (seq >= str.length) seq = 0;
m. Q$ `! L1 K: p
}
, s; R' `- x3 B. M( C1 B
</script>
" V. s4 x+ X' [- T) y8 O
</head>
6 K. S9 R- L6 V$ f
<body onload="setInterval('scroll()',second)">8 m! |/ x! O& h
<div id="word"></div><br/><br/>
0 x( t1 t- Z" Q0 f# m
</body>3 S! j E3 O$ [- v9 o& z
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 Y, ]; l, V l( n4 J2 u( S4 v
<html xmlns="http://www.w3.org/1999/xhtml">
- M# `) \( ?/ a
<head>7 e# X* Z6 w, o# p3 }# }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ W- C1 A/ c4 F! a7 a/ G* S# U4 X
<title>无标题文档</title>
! w: A: b) V" c! d" d D) L
<script language="JavaScript" type="text/javascript">
: U" B5 O0 G0 g6 t# ] z3 q9 j. F( {
var second=5000; //间隔时间5秒钟/ v# e4 C! F( F( x& [3 E5 f
var c=0;% ^9 X. |1 y$ ]6 d# J0 v, s4 ]
function scroll() {. E* F, v6 b6 c
c++;$ |* L3 S i5 M, v
if ("b" == document.activeElement.id) {
6 P6 w/ O2 x0 P8 G
var str="定时检查第<b> "+c+" </b>次<br/>";
' h: k8 w& H' r( R" O9 `3 y* k) w- w
if(document.getElementByIdx_x_x('b').value!=""){9 E$ H4 f6 b% ^
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>"; f" l4 S- r" W5 x, _
}3 N* Q3 C5 ^9 n2 W
document.getElementByIdx_x_x('word').innerHTML = str;
5 `* D: e4 p# u. j2 D m4 z
}
! R$ c) E* n& Z" ^& V' I6 G
}9 f9 |% H m2 Q4 o" }$ O+ `" X1 k
</script>( K2 Y0 |! }: \8 R8 q. d
</head> a+ ~* z: a1 j& X; |
<body>8 u R2 p1 C2 y \
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
0 f4 `6 A+ Z1 M0 K F( J
<div id="word"></div><br/><br/>
$ R5 ]% q5 V/ S8 G
</body>
8 j' [/ M! J& w5 d5 t, _
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">6 k$ F" M! R) N( E1 L `. v
<head>
( h [7 h, O& {
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />1 k" i* e! V$ g. D/ C
<script language="javascript">& p' T" z9 S# g, K" K7 C3 k
function count() {
) ^2 B& n/ F t: t" W [ H1 g
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' y4 ?4 S( }. X5 i. L
setTimeout("alert('十秒钟到！')",10000)
7 C4 {) R4 z6 T
}% f. i! C( X, Z4 t9 {
</script>9 }: N( Z. v" }5 c
<body>
5 T7 t. Y- o/ w" ]8 p' `2 C
<div id="m"></div>* b$ z u3 y% H! _* \2 g5 y; w8 p# E
<input TYPE="button" value=" 计时开始" onclick="count()">
* Z0 L7 Z) c: E( |
</body>$ f U# E/ z) {* I; w4 S6 p6 N
</html>

复制代码

例4:倒计时定时跳转

<html>
. l( l0 R) r5 Y0 }4 w6 s
<head>, `0 [1 ^* R8 N" d7 m, K
<base href="<%=basePath%>">
, U( @" `, n6 r' g# t1 t
<title>My JSP 'ds04.jsp' starting page</title>( U% B6 K" |1 Y; D
<span id="tiao">3</span>% M, a5 ^8 ?" V" i. t3 |+ M# T* M
<a href="javascript:countDown"> </a>秒后自动跳转……8 q: I( T K/ @, W2 y2 T; b, g
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
! F( W9 w" z2 L# e
( i: w! |, Z& J( A8 X6 n/ l! h
<script language="javascript" type="">
3 z% G1 J! W: \( F
function countDown(secs){
+ R9 Z1 L/ s4 Q6 G$ S, s
tiao.innerText=secs;
, o2 i4 L3 Y( o7 c7 B5 y: S
if(--secs>0)
0 n/ ^4 F6 V F3 W; P
setTimeout("countDown("+secs+")",1000);& z5 }& V; n& o/ _( s9 }
}$ H( N$ y& y3 ?" @. n0 r
countDown(3);0 V$ |8 e; y0 z$ g9 [% b1 ?* Q
</script>0 v# x; I" R* t, x" G3 ^
* y0 B }- i: ^: i7 m. Z4 T% k
</head>

复制代码

例6:

<head> * s5 X2 b6 N6 }% H
<meta http-equiv="refresh" content="2;url='b.html'"> % H4 J0 n: w$ M
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
- ~% x1 [; K+ f# f! d9 M% p; m7 W
setTimeout("window.location.href='b.html'", 2000);
- H5 m$ A: ]& X* H
//下面两个都可以用: t' F7 a) H2 t$ {6 C: Y
//setTimeout("javascript:location.href='b.html'", 2000);
( ?& x& ?4 W& f2 i) n5 w
//setTimeout("window.location='b.html'", 2000);
7 ]8 B* E* c& R: H
</script>

复制代码

例8:

<span id="totalSecond">2</span>
0 f. G- z* h- W/ F
<script language="javascript" type="text/javascript">
9 f0 P- E) U b% I
var second = document.getElementByIdx_x('totalSecond').innerHTML;: |: a2 k' T# W7 w1 ^
if(isNaN(second)){0 n' m8 m3 @1 E5 Q% `4 ^
//……不是数字的处理方法' X$ A1 y& [) o- F) |; e
}else{; o% r! e7 n4 j* S. n6 \1 }
setInterval(function(){+ y0 ]2 D" Z$ V! Q
document.getElementByIdx_x('totalSecond').innerHTML = --second;# Y& u ]7 ~& {! O+ X
if (second <= 0) {9 J, F; ?& X% j- v/ g0 d( S! ^
window.location = 'b.html';
9 i; H( _ F, O* I8 F. L
}3 d$ y A) M% W. y" U; r
}, 1000);
! m* o2 Z, L/ _8 N, f
} `* ]% L D2 T( ?* }) Q
</script>

复制代码

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

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