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

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

1，只执行一次的定时器

<script> 4 Q8 D) O) z; j3 G# o
//定时器异步运行
# ~+ G! J( u* Q
function hello(){
- U( b& W8 r- o/ q4 \& u# @: J
alert("hello");
2 f( e9 C5 u, P0 T
} 4 `/ {$ \: P2 W/ L6 A% r( E$ |
//使用方法名字执行方法 5 W$ f6 U5 g& j0 f( ~; D. R# u1 A
var t1 = window.setTimeout(hello,1000);
" X/ l6 X3 Q u( w
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
( I1 h* g# Y- b7 U2 b
window.clearTimeout(t1);//去掉定时器 , c" c+ s! m' \4 T. b+ ]
</script>

复制代码

2，重复执行的定时器

<script>
/ h9 i) R& t* ~! z& B4 w$ ^
function hello(){
, v7 h7 \. [0 t2 R& s+ _8 c
alert("hello");
, z% q$ h' x& P5 J
}
6 W: p7 s" ^4 y( L7 g- w, b M1 A
//重复执行某个方法
9 l% i$ R) l; W) l, x3 M0 o) c
var t1 = window.setInterval(hello,1000);
9 z- C4 \5 Y% @ P# V
var t2 = window.setInterval("hello()",3000); $ v- j2 Z: W: c- b5 b
//去掉定时器的方法
5 c$ H! b- _( y' P/ {
window.clearInterval(t1);
% O' p9 s. x* B$ H) j6 f
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
9 v$ j) u* o+ C$ n Q6 n2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成4 I) H# { w8 ]0 X
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。1 [( l/ C& Q% g) ?/ n5 {
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。3 D% D; k, z. [. h
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，$ b0 N( K7 n, j+ c
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。; N' z' ~- S* u
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。% c9 E6 ~6 ^/ ]1 w) n
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.) t T$ N' J+ p) \% f2 v
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
3 R: J9 V8 d% B2 RclearInterval(对象) 清除已设置的setInterval对象

略举两例。# |% Q; v' C2 N- g$ w8 t. y
例1.表单触发或加载时，逐字输出字符串

<html>; ?! B8 V/ l3 r) q# S8 r' y
<head>
* B/ w: w1 J" B. G9 ~# \% c6 ]) n
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 u4 f8 l' W: z
<title>无标题文档</title>
3 C: H. a/ R' b! z8 _% Q% k4 p
<script language="JavaScript" type="text/javascript">1 E2 M2 h ~- A4 H
var str = "这个是测试用的范例文字";! | U+ I+ v$ O1 b
var seq = 0;4 `- a, Q3 V8 {
var second=1000; //间隔时间1秒钟 s# T* T# Z/ a# E4 L2 E# U, `4 w
function scroll() {; R8 L7 l) u: s7 D
msg = str.substring(0, seq+1);4 G. K3 z4 R5 i, j. m+ U% n: e
document.getElementByIdx_x_x('word').innerHTML = msg;! q! L( T; O& [1 N$ @; N( M; J
seq++;7 {9 m; R4 t i5 k6 g2 t
if (seq >= str.length) seq = 0;$ Y$ a% D9 t5 w. K/ H1 G8 x
}7 ] i2 h5 n! t2 e( W1 l
</script>! [5 Y. G1 L+ l9 p
</head>, A' @9 @* g1 y8 b3 k: s F
<body onload="setInterval('scroll()',second)">" W' o2 g! h) R- U
<div id="word"></div><br/><br/>
. y0 d$ z3 w1 t0 I
</body>
" w% l8 z" S" {$ [* ]# k% d
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" J0 b5 W) }, p" @6 m
<html xmlns="http://www.w3.org/1999/xhtml">' A: C# {- B W, J
<head>
2 L1 f& i0 R$ \2 C5 z
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 n+ L% L- n7 D; V1 M& U
<title>无标题文档</title>* H) L7 \% _; l; S8 |0 f
<script language="JavaScript" type="text/javascript">2 H( `& `; {4 s
var second=5000; //间隔时间5秒钟
9 B& P0 ^ H5 I5 p' G% o1 O
var c=0;
% p3 _$ @, D) i
function scroll() {
8 j8 w( T# C. R7 e
c++;1 \6 \, p0 g: t" V, t8 f
if ("b" == document.activeElement.id) {& X, i* x+ Z, r# I! i' h: a
var str="定时检查第<b> "+c+" </b>次<br/>";
% V- s$ i1 Z; e0 F+ l3 d
if(document.getElementByIdx_x_x('b').value!=""){
, T+ S, C% ^ X% H" G9 c u
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
g2 s6 c2 p6 Z
}2 q# E1 s: C- f; ~2 b3 L9 J
document.getElementByIdx_x_x('word').innerHTML = str;6 l& k* ]7 R: G& q {9 M
}& j- R$ P/ {. c8 M
}$ ]7 S6 w7 d' \5 @" y
</script> i& i% [" W, }* }9 o
</head>: n* V. q/ [$ x7 |; J* m9 d
<body>
2 d% P4 N1 q; }
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
' g7 ~; y- y# [9 y. y* C1 P6 S
<div id="word"></div><br/><br/>9 a. G( C! Q0 w; a3 _: z+ s; D7 }1 e; [
</body>" h* `8 M7 Y# s& |: A( e. T
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml"># F8 f2 t8 [. j" D/ c3 t
<head>, G$ M$ S- y# p
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />0 f# v, G" g# X4 m
<script language="javascript">
7 [6 `) Y# }6 j! C
function count() {
7 X' m3 h! W5 R- f# b: x }
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
+ ]* O* K. l; h" L+ f) n- J
setTimeout("alert('十秒钟到！')",10000) `0 E& N% m$ G! ?
}
6 P5 ]/ g# Y l' [5 J
</script>
) ~! V: _- z3 Z! N6 M1 t) d
<body>3 L$ m! y# l; ~5 a2 @3 Z
<div id="m"></div>* d8 @' }( h* |* B
<input TYPE="button" value=" 计时开始" onclick="count()">. }2 Y6 }+ ^. [# I
</body>+ {) J* V0 U- ^" x6 K+ m+ i. {+ @; J
</html>

复制代码

例4:倒计时定时跳转

<html>
: h- _3 G8 w* x
<head>7 B8 P/ O& Y$ u4 |) X" S1 t# z
<base href="<%=basePath%>">- y8 J- Z$ G+ \/ s( I2 F4 d+ e
<title>My JSP 'ds04.jsp' starting page</title>1 @0 z4 `, Y3 a- v4 l$ y
<span id="tiao">3</span># L3 p0 Y% l4 f0 q
<a href="javascript:countDown"> </a>秒后自动跳转……) }+ U+ N" K* J9 W# a
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>8 W; @8 G) E0 k% S$ ~
* e# K6 K$ z" T
<script language="javascript" type="">8 k6 f5 O2 G* X" l& s
function countDown(secs){) ?8 h" N- ]: c" K0 L
tiao.innerText=secs;
* Q% K4 d+ ]. D
if(--secs>0)2 U2 v1 Q3 k! [% G8 v
setTimeout("countDown("+secs+")",1000);
+ h7 f# u6 {3 A
}
# b7 [ F* A# g! b
countDown(3);7 N: E# f; j0 A5 m0 t' d+ k
</script>
8 \' ~2 a- N. }2 a8 P$ A8 T" Y
' v3 n' F8 x0 A2 n- `5 G
</head>

复制代码

例6:

<head> + R% Y8 T3 \; J" H, S7 T2 y
<meta http-equiv="refresh" content="2;url='b.html'"> ! e0 a1 I: H7 n* Q6 |
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">$ X# J2 f* E' G2 i
setTimeout("window.location.href='b.html'", 2000);1 U0 f( i1 ?- W0 i
//下面两个都可以用6 z& x; o- x! b5 s" G( @
//setTimeout("javascript:location.href='b.html'", 2000);8 o7 X5 c& K, Z, |/ G% z" H7 e
//setTimeout("window.location='b.html'", 2000);
+ d q D7 Z4 p; Y, W. A- o& g' h
</script>

复制代码

例8:

<span id="totalSecond">2</span>4 s) Y6 e" Q) ]& T Z- M" `3 i
<script language="javascript" type="text/javascript">0 `: `! e. N: i5 u
var second = document.getElementByIdx_x('totalSecond').innerHTML;( G- [9 E7 h6 a0 N
if(isNaN(second)){
5 I) Y1 \, H/ x' ?$ C
//……不是数字的处理方法! e( t+ V$ h, b5 X) e; N+ A) Y- C" M
}else{$ @6 N2 H6 F$ O H/ C
setInterval(function(){
9 x9 o. o# f# q7 D. M
document.getElementByIdx_x('totalSecond').innerHTML = --second;
! p2 M% l y7 |. S( }! O; F @" @
if (second <= 0) {3 d- j8 U; |1 N! g _* q- w
window.location = 'b.html';7 ^; c) j8 ^/ |6 y, c
}
- M1 G/ {5 z; X y5 L- u
}, 1000);) D/ u5 n$ \6 L$ x2 ^, ~6 t
} ' d6 l, B* z* _/ S/ d2 g
</script>

复制代码

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

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

浏览过的版块