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

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

1，只执行一次的定时器

<script>
% g& T) _6 c. ]/ z5 W$ p
//定时器异步运行 5 x) W- Z/ S# y- O
function hello(){
. }' c: ~( B$ v- l' v9 O2 z
alert("hello"); 4 e/ d2 z; Z6 o- M, v' N$ j/ q% w! r# q& v
}
: @: r( o- G7 o t: h% r
//使用方法名字执行方法 5 c1 d, s! F3 G+ K! x& c; n7 m4 Q
var t1 = window.setTimeout(hello,1000); ( P8 A1 T$ q% `+ A8 x
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
# B! n- M2 [7 s7 K
window.clearTimeout(t1);//去掉定时器 ( ?% {. M' t0 ~
</script>

复制代码

2，重复执行的定时器

<script>
/ e! {; S2 p% B, L
function hello(){ ' @5 m5 t, m F! P2 a* f
alert("hello"); 7 d/ E0 U1 g0 K$ r
}
* {5 C$ Z! U! w
//重复执行某个方法 . m, Q8 e2 o' |- H6 x2 u
var t1 = window.setInterval(hello,1000); 8 w' i: _1 d3 ^9 z( J0 S5 e6 u
var t2 = window.setInterval("hello()",3000);
0 T! q6 q6 u- E3 T3 E% a
//去掉定时器的方法
8 @2 N, R8 R, v2 k: ]
window.clearInterval(t1);
) ^! s& t* V7 d2 P4 U' Z
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);6 a' C' k7 T" |/ h4 _" m
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
1 _- b5 E& }! M# ~( r) }& v0 \“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
( B$ r/ \% k. h6 g9 y; s　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
! V/ u2 T4 ]& t8 C比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，0 k y" c( b9 k8 S3 T* o, ~
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
( u& |- O5 m" J" C% W. L% \. V比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。& Y+ a; D `1 R% ]8 F- [9 V& l
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式./ R7 R9 w+ ]- j) ]$ q5 J, K+ v
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
, O1 _4 a2 m' x0 H6 Y) H1 kclearInterval(对象) 清除已设置的setInterval对象

略举两例。
* C) S; \7 A! ~, S8 c5 c5 D$ J( u例1.表单触发或加载时，逐字输出字符串

<html>- K, ^4 h1 V0 i) a+ b
<head>6 w" k" Z2 ~* x4 C0 D* k, t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, O: A" C& k: H k, d$ K
<title>无标题文档</title>
$ [! I7 I3 l) ^2 _
<script language="JavaScript" type="text/javascript">% q6 c2 t* \% ~; t9 ~: z
var str = "这个是测试用的范例文字";6 e6 t$ V) x% f# G' _
var seq = 0;
9 @! B7 i4 x5 L* |
var second=1000; //间隔时间1秒钟
& h" w9 Z+ @9 q# R; k* P/ I
function scroll() {
1 m& u$ {' ~: F
msg = str.substring(0, seq+1);
) l" U& f: O, ?. x2 q
document.getElementByIdx_x_x('word').innerHTML = msg;
* ~3 {/ y6 M8 \6 K" F: v
seq++;
2 `# [7 p: @( A! q4 ]
if (seq >= str.length) seq = 0;
* R9 W. j5 x$ i$ {/ {
}+ e) Z, m5 ^7 Y, W7 S5 E
</script>: A* U* f5 M z
</head>$ d r" E' l8 c& D& _9 J
<body onload="setInterval('scroll()',second)">
3 o' [; S3 M4 e' _9 d' G; P
<div id="word"></div><br/><br/>% m( d* o/ ?3 G# r2 i# y8 J
</body>) d0 {' b1 P$ D- t
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- ]$ S. i/ T3 c3 {% O. B0 Y* P4 X8 ?
<html xmlns="http://www.w3.org/1999/xhtml">+ P3 d2 y7 ~; a2 |& r
<head>
8 v- U! a2 O. E! m5 X. E E, Q
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# A" t8 i( g5 K& Y& M8 A
<title>无标题文档</title>
% [$ ~5 u8 ` g* s5 ]
<script language="JavaScript" type="text/javascript">' x# a/ w- w+ B9 L+ d) Z
var second=5000; //间隔时间5秒钟8 Z, _$ B. k! g' c
var c=0;
' w- k* J' i1 w* T4 n5 J- W+ P) m
function scroll() {
: Y9 M) ?# ?$ U4 p9 h' J9 V
c++;- A0 P' j+ c0 i( Q# X% I+ H
if ("b" == document.activeElement.id) {9 D2 u. s2 v& X% _* g
var str="定时检查第<b> "+c+" </b>次<br/>";
5 a! V6 I1 j w2 b# ]) r( {
if(document.getElementByIdx_x_x('b').value!=""){: U0 i2 N! O8 f5 D) S5 E
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
, R( y( K/ B8 \8 }; W L
}
7 [& H- D0 f( ?( y1 t
document.getElementByIdx_x_x('word').innerHTML = str;
6 }) z+ o: g! n
}: I- L3 G; D5 z6 I: V
}% M4 w, q2 s4 `" M/ X; X, S; z, I
</script>
! l& A( H6 Z! p
</head>, N3 q. {3 d$ {$ y
<body>
$ t. C' Z3 x% Q
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
( `# C# N8 m% k( w* w% f
<div id="word"></div><br/><br/>
$ E/ t% O) U7 o: [6 j) ?1 B
</body>
6 s) V8 W3 Q8 h
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
) [7 D7 ?3 [6 G: B
<head>7 w5 b1 R* e$ a$ u; Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* V) g9 a; y" g- ~# S7 E6 G! F) I- m
<script language="javascript">
$ z$ ~6 ~& m; v2 ^" F* q
function count() {' N" {" ]+ f- M2 u K
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";' c: z. C7 o# b0 b
setTimeout("alert('十秒钟到！')",10000)
' h- T: E. X3 n: T
}
) ^+ Y( r! v+ n* r- P* P' W
</script>. J6 t, }' z# K; G, e
<body>- p+ Q2 \. h; ~5 a! e
<div id="m"></div>
# b1 R6 U! X+ K/ e0 O5 N
<input TYPE="button" value=" 计时开始" onclick="count()">0 m3 r4 ^* l1 ]) N3 j
</body>( C- D& D8 A& N: q
</html>

复制代码

例4:倒计时定时跳转

<html>' m4 `& N1 {# T% H0 f! R
<head>
4 v4 D, v2 B- n. j+ H' L2 O
<base href="<%=basePath%>">
) f1 t _% Q; c" d5 A- b4 C( |' ~
<title>My JSP 'ds04.jsp' starting page</title>
! x# n" h9 W4 I" Z- ]
<span id="tiao">3</span>
9 G4 ~& ~, y# b( E# W
<a href="javascript:countDown"> </a>秒后自动跳转……" E" ~( \3 J }% W" q
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
/ G- O* _2 l1 ^6 t7 l
- p+ l Q; G$ u# f
<script language="javascript" type="">
& h! ?1 A6 V" p9 D: W' ^
function countDown(secs){
3 A `: X; i2 m* W- T+ h
tiao.innerText=secs;
|+ w2 ^/ {# V
if(--secs>0)- ^$ e* k2 [4 V, J, g8 S. j7 b7 c
setTimeout("countDown("+secs+")",1000);
4 {( ? h$ C0 }$ j+ k8 s5 u
}
. L" S3 Y* d8 U' N: o0 L3 y
countDown(3);
( a F) q* \0 j/ T
</script>
0 A, ^ h" k! u( V; m5 u C
& Q9 _" O P4 V: C
</head>

复制代码

例6:

<head> ! V6 k: G5 l( R5 h
<meta http-equiv="refresh" content="2;url='b.html'">
( n7 f% `4 c# m3 X5 U8 A: F
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
. [' X/ f6 T E; D9 G0 N2 c
setTimeout("window.location.href='b.html'", 2000);0 ~, _( w: W4 E) S' ]& \
//下面两个都可以用
$ f% `2 j7 `" R
//setTimeout("javascript:location.href='b.html'", 2000);
" K6 ~' P) T2 f. X
//setTimeout("window.location='b.html'", 2000);: U+ L+ z4 A2 T, o$ |% p
</script>

复制代码

例8:

<span id="totalSecond">2</span>
' K2 K) F: e( P2 Q/ \/ i
<script language="javascript" type="text/javascript">
[# G' K7 Q: K# ]
var second = document.getElementByIdx_x('totalSecond').innerHTML;7 c! m6 O% R+ _) L
if(isNaN(second)){
/ l# U# z' Q; C) p6 A' h D: m; k
//……不是数字的处理方法0 E8 A. H& G1 C
}else{5 x7 l" V) _5 b) E# [6 ?/ G; z
setInterval(function(){- U& O, _; ~) o$ |6 S. {( N
document.getElementByIdx_x('totalSecond').innerHTML = --second;
7 O- a& |# C7 `+ C
if (second <= 0) {8 [! d; I1 u* s' C
window.location = 'b.html';
2 e: m; V" V) E- D7 m# n+ a
} c; L3 C; N \ v: E: {1 p
}, 1000);
! u# r+ n% \$ Q* b$ j
}
& Q( V" p3 \. ~2 ^
</script>

复制代码

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

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