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

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

1，只执行一次的定时器

<script>
( m: e' }0 z0 K4 B) z
//定时器异步运行 5 _$ a6 F6 ^- F; G
function hello(){
4 C: T4 z* w0 }8 l( b7 d2 F
alert("hello");
! V. c V1 ^0 k% r# P
} . F2 e/ ^5 I+ ~0 H& G
//使用方法名字执行方法
* _+ |1 V1 \" l" @2 y- }) d
var t1 = window.setTimeout(hello,1000); 3 K8 w) R/ r( q& G6 C/ X3 G K0 ~
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
( ], g& _) E# ~+ S' ^6 V! |7 |1 L
window.clearTimeout(t1);//去掉定时器
+ H/ s; v7 l7 K1 d* L" A9 h
</script>

复制代码

2，重复执行的定时器

<script>
$ m h1 q8 q1 X3 U; A
function hello(){
7 L. I/ D! N8 C; C! e7 E
alert("hello");
$ N4 i0 u9 `# S4 m: [* f1 V
} 9 s$ u. T0 |8 o3 c
//重复执行某个方法
8 E6 u3 \ ]7 |8 }
var t1 = window.setInterval(hello,1000); 9 i3 F6 k$ t/ v4 k
var t2 = window.setInterval("hello()",3000);
- y$ g5 U8 y; ^$ @$ _2 R9 E/ ~: B
//去掉定时器的方法 " @& G* X* W: p" b& b( y6 |- X
window.clearInterval(t1); 3 f! `( k) C. e6 y/ E5 a0 z: U
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);! g! y) [" w; n
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成( ]  W9 {0 X, C
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。% B  i! q3 ?2 v' Q/ o+ |
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
1 r* \; ?7 g# _  x1 M6 d; `比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
9 i7 G! z! `) J4 \7 n- `则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
# F% r6 ~+ S l) x# m) K0 V% n比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。5 N) T0 d- R2 L! ^1 M- ]" h/ F7 E5 K* i
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式./ Z6 J5 X; o3 R/ \% k9 K2 U
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象5 ?( [* {5 p/ j
clearInterval(对象) 清除已设置的setInterval对象

略举两例。0 W9 p; P2 P. s$ E/ m
例1.表单触发或加载时，逐字输出字符串

<html>$ t0 U$ Z9 v8 X) ^9 _& L
<head>
2 L, \$ M# p4 |- j& o
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 k" k% D6 _' T" O: T, s# l# M
<title>无标题文档</title>( E% O2 S2 ^- F0 R! j( y7 I( ~7 W
<script language="JavaScript" type="text/javascript">
3 o: I3 |7 Q S: j6 w6 ~ s
var str = "这个是测试用的范例文字";
% ?. i4 B/ S; B! c' I% h' p+ _& {; R
var seq = 0;
# D5 W' M0 M( g0 G9 p) Y4 m5 p
var second=1000; //间隔时间1秒钟
! {, Q- o, u0 l, @) E
function scroll() {
. c4 r- b4 y( s$ ?
msg = str.substring(0, seq+1);
/ @. [8 e5 q/ o- y) r
document.getElementByIdx_x_x('word').innerHTML = msg;. t4 {# ]# b! l* ]/ x# J, O
seq++;3 b& G3 G7 H9 r
if (seq >= str.length) seq = 0;; m8 R0 O* b+ W( f$ L+ e
}
) A& g9 x# W& r F* R! e' }2 i
</script>$ v/ A8 o5 g6 l; J& U
</head>! `! l# s* [: t5 H1 B& c% d% g
<body onload="setInterval('scroll()',second)">
$ o7 A( U0 m$ l/ t2 u2 p/ E
<div id="word"></div><br/><br/>* y4 H6 I1 e1 Z! V
</body>
, D1 c) _7 O/ P1 b2 O7 E
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">( D5 d0 Y; @2 A+ g8 w
<html xmlns="http://www.w3.org/1999/xhtml"> J6 |- X9 f6 D, f1 m& A7 D6 d! y
<head>
! Z" h- c j5 d+ r7 W! h" Z/ o
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 X) [7 Q' Y/ C: H# F
<title>无标题文档</title>1 \$ @6 h! q) o# n8 C0 T
<script language="JavaScript" type="text/javascript">
( M* J3 |; N" g9 F" ~+ z" A, u
var second=5000; //间隔时间5秒钟
4 c6 @2 t; a' g1 f
var c=0;
# p$ F/ i9 K- P
function scroll() {+ l# x+ _5 \* a$ o
c++;
* o; Z. i1 I9 O L# y" e) Q+ ]% x
if ("b" == document.activeElement.id) {# H0 G# f/ T3 W2 ]5 [0 W
var str="定时检查第<b> "+c+" </b>次<br/>";2 z: Q* [* ]5 G ]9 Q; B
if(document.getElementByIdx_x_x('b').value!=""){! F# g8 z2 G0 E
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
) Y2 H, i: z% o9 ^
}; t+ N, Y2 g9 E5 d- F
document.getElementByIdx_x_x('word').innerHTML = str;
; Y2 a" l- G* V5 n4 N
}0 \) Y% W1 G& x% z
}9 G+ I' {* A0 r, n4 O& C
</script>
0 {" e- ?( p7 v4 Y) Z" T
</head>
6 S$ X. L9 c; R c
<body>9 g/ ]8 ]; Z& F; |/ d0 T: l- M3 H
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
Z- X7 ]0 U' O$ z
<div id="word"></div><br/><br/>
: x W9 A A$ k! a3 P1 L" J! ^
</body>
) T4 |3 [4 B& r2 u$ k' h. F
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">2 {& P9 U; [2 n$ T
<head>
6 N/ z- k1 c, L) k+ u% ~+ L
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ B/ Y! P% s( e% _
<script language="javascript">+ T! `' u3 j. Y
function count() {
6 ^$ Y7 w9 z: U; i$ C" |0 L' ^$ i- V
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
, q% T0 `1 y5 Y5 q2 ^
setTimeout("alert('十秒钟到！')",10000)) K7 `7 R+ d+ W" x! Y
}
# b' U% \9 A- L- a) {3 Y8 d
</script>3 [' H, }$ o9 `
<body>
/ {$ }) Y0 X/ H0 [7 S: U8 l3 X# w: H1 K
<div id="m"></div>- P) K, [3 _* d! L H# O' |
<input TYPE="button" value=" 计时开始" onclick="count()">
( V8 D% g) B' r/ t
</body>& E/ k" Q' {4 U# c
</html>

复制代码

例4:倒计时定时跳转

<html>
' Q9 N; Q5 @! F
<head>, e6 R: a; b; Y3 e- u, M. ^& W
<base href="<%=basePath%>">7 G) \- e; M. m. _" ]) M
<title>My JSP 'ds04.jsp' starting page</title>4 u" H( R9 f2 P1 h$ W
<span id="tiao">3</span>( F" B% L& O/ D5 R
<a href="javascript:countDown"> </a>秒后自动跳转……& f$ q1 p/ h+ c$ H; c
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
3 A/ E0 {: p2 R1 G$ j
2 Q6 q4 d* m$ m9 l4 ^# T3 P# T
<script language="javascript" type="">. L9 y2 W' I+ K& ?1 Q/ k5 e
function countDown(secs){
1 ~% E# q" |- E) K6 R/ U7 i# d+ m
tiao.innerText=secs;
0 X0 T: j! P; d1 E# s) ~
if(--secs>0)
( c: _; k6 t- m* O3 e. A# J. X
setTimeout("countDown("+secs+")",1000); b( e5 e7 O |
}
4 X+ L: n) o' E+ P: V/ R) p/ x2 X
countDown(3);
w2 @. a/ ^+ s4 N2 ]3 ]% N
</script>
% i% C- H; U8 R: u# e" g) z8 s2 a- K. P
% ~" J8 D, ~$ Y Y
</head>

复制代码

例6:

<head>
2 ^. a- H \! l8 s' i! a$ ]+ m
<meta http-equiv="refresh" content="2;url='b.html'"> ) m6 M: k- n: i
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
3 `) f* M9 G( x- L3 x0 s& Y& o
setTimeout("window.location.href='b.html'", 2000);9 t u5 K- \6 T5 D# z7 B8 q _$ y
//下面两个都可以用3 B. J H @2 {/ E9 ]
//setTimeout("javascript:location.href='b.html'", 2000);9 c+ o( @9 J6 Z: ~9 Z& H) o! n
//setTimeout("window.location='b.html'", 2000);: |2 [; t1 M. r4 M) `! r$ j
</script>

复制代码

例8:

<span id="totalSecond">2</span>5 `3 h) ^. \% s# \7 p/ T2 ?
<script language="javascript" type="text/javascript">5 b- i- I. N( @6 q2 L+ j
var second = document.getElementByIdx_x('totalSecond').innerHTML;
9 T A- g' _3 s& o
if(isNaN(second)){
1 W7 M0 {% j. r) [8 q
//……不是数字的处理方法( d7 F& g5 J4 [- R
}else{
+ t' ]" A- F% Z! ^ _# f1 [0 z
setInterval(function(){
) y! |4 f% i: K( Z0 I
document.getElementByIdx_x('totalSecond').innerHTML = --second;
% `2 `( N% Z* ?6 T
if (second <= 0) {
) k; D! g% q; {( ]4 v
window.location = 'b.html';0 q8 ?) c" V7 U0 ] n9 x) }- l* _
}
2 Q+ f5 _# O& s$ S$ K, ^( ^
}, 1000);# X3 s# ]3 c R7 G+ y& M
} + P' T3 t3 A, W& r
</script>

复制代码

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

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

浏览过的版块