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

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

1，只执行一次的定时器

<script> 4 d! k( _$ \- \; l1 X+ Q
//定时器异步运行
& ]8 R/ ]0 }: |* I8 r2 G& I* l
function hello(){
; C& ~/ j& X3 K9 y9 j
alert("hello"); + y# c: v& I8 p: u/ H
}
- U7 ]( ~2 d: s% X( u, a
//使用方法名字执行方法
0 G0 T( D( D) p. {1 V$ R" c. d
var t1 = window.setTimeout(hello,1000); 8 {, P. d" s9 w, ~. K {
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
9 y% h# G2 s0 U5 Q. k
window.clearTimeout(t1);//去掉定时器
; b1 x* w# Z) _
</script>

复制代码

2，重复执行的定时器

<script> " N, W- O$ G( ]% H1 T
function hello(){ & Z* J4 ?* Q& \% l9 M) s1 ?" i- j$ {
alert("hello"); ( E$ V) w4 U8 [7 n( |, P2 g$ ^* ~
} ( B! v) _) D% D7 y( {# ~, L: v
//重复执行某个方法 + c& R) v7 x0 b- k
var t1 = window.setInterval(hello,1000);
H4 S9 Q4 B& F) s% O4 A
var t2 = window.setInterval("hello()",3000); * \& G* O* Q- u* K& J
//去掉定时器的方法
+ ~3 a- @) a2 s7 O* u' s, ^
window.clearInterval(t1); ' u; g$ c* v+ ?. n$ w7 G# U& @
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);$ D4 g; E. N8 c, Y0 K/ X0 V
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成5 }" w5 F4 ?- { ?. _: a
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。; s0 F0 E- u) S
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。/ U* [1 r8 r+ K! A9 d
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
+ w* A1 Y" V* `则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
, \& B8 ?: h( `+ X }4 i比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。2 w9 ]* _8 T5 G" l) i, S
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.$ k- K! D& g( k. A" \1 B1 c
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
# n- a+ w, [5 d$ M- uclearInterval(对象) 清除已设置的setInterval对象

略举两例。9 {! [( K8 f! B& d7 X( f3 V {
例1.表单触发或加载时，逐字输出字符串

<html>
2 K0 N+ w; d8 N
<head> G- C% X1 U; {
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) j3 K# i/ Z) ^1 X
<title>无标题文档</title>4 p: b% C. j: C# z) N
<script language="JavaScript" type="text/javascript">
0 j1 m, T9 O, h5 T
var str = "这个是测试用的范例文字";
( x: h1 M5 Y0 s* O
var seq = 0;! X0 A, W+ {; |0 w- |/ p
var second=1000; //间隔时间1秒钟
. T- q I% m W8 `8 Y. J1 m; K
function scroll() {
: h" m9 t9 t3 i X$ X& b7 b, L6 y- A
msg = str.substring(0, seq+1);
( @' F0 ^7 N6 ^3 Y
document.getElementByIdx_x_x('word').innerHTML = msg;
! D4 m" f8 m$ v4 I! Y7 e
seq++;
# _) s- R- f% j m+ ?5 Y4 G
if (seq >= str.length) seq = 0;; m* V; M0 l# {- ^* A6 G w8 K
}
' G K% \3 Y6 q
</script>) M' y: ^, T; F% I; H+ M1 |
</head>
: d% F- D1 O: i# j% W( \# k
<body onload="setInterval('scroll()',second)">
* V( F% S% g- Q, D. Z/ \
<div id="word"></div><br/><br/>( y5 r/ G( r+ p) d2 u+ ^* d
</body>
( {- N& D& O+ q8 ~4 W- p4 p
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">8 e, `; [- J+ D& U( I: @3 f
<html xmlns="http://www.w3.org/1999/xhtml">
/ X7 {5 S0 A0 [2 R
<head>
4 j) h3 D9 P( d7 ~) D( ]8 i4 s
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, N ^; z1 q7 x2 n: ^
<title>无标题文档</title>) F! p2 u8 | L: f7 Z
<script language="JavaScript" type="text/javascript">
) A$ ~- A, T! X! t4 }
var second=5000; //间隔时间5秒钟
* ^4 |5 m$ W- k# E* `* O9 m' G
var c=0;
- c) R4 t. r! G/ `
function scroll() {
# R4 }$ T" W* u- r# G5 W
c++;
0 R _/ k5 H7 @
if ("b" == document.activeElement.id) {
$ K4 K4 H# p, j' N& S4 {
var str="定时检查第<b> "+c+" </b>次<br/>";
3 R; r+ T, ^5 A9 U6 w
if(document.getElementByIdx_x_x('b').value!=""){
& J7 _% c% H6 U8 y
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";: L% z. C& D7 y1 f$ ?
}1 _& H; g, a7 {# c
document.getElementByIdx_x_x('word').innerHTML = str;
" N. J- M3 ?, `: D1 [/ h
}8 d% x7 j2 \7 o4 g, h: U
}
m$ u O( _3 ]) Q
</script>4 I* y" p I* P; C b
</head>2 s# s% ]& C* V: J
<body>. N5 D3 A6 G V1 Q. d0 a6 E0 S+ h
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
& Q# D5 n8 m/ k( i) Q# g# f/ x# C2 ]
<div id="word"></div><br/><br/>
. i& e6 {# w5 D4 [
</body>
" ]3 s. k/ ~# ?& R8 T, R
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">4 Y! l& |8 `3 g- H: i3 {" |
<head>, h, ~3 v4 F0 P% y9 M) z/ }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 n/ D1 C! t( \# \8 \9 b$ q
<script language="javascript">
^$ {# I$ u' w) I6 u
function count() {
7 L. i0 n$ x3 `. W1 y0 a
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
4 \% L b! x& i S5 v
setTimeout("alert('十秒钟到！')",10000): K- x3 S5 C8 O. W) \
}
; W; |. s1 |2 u h6 u9 d1 A1 d/ @
</script>
3 E3 M- ?6 H2 q% l2 B
<body>
6 X2 V0 O h1 T+ L* {
<div id="m"></div>
& e- N, b3 U6 u0 I8 M- c
<input TYPE="button" value=" 计时开始" onclick="count()">0 b6 A9 v( ^8 A1 M* X* a
</body>
. h. V% c% b$ O+ c1 Q! V
</html>

复制代码

例4:倒计时定时跳转

<html># ] }$ ^" B2 N4 S5 w
<head>
8 l9 F ?# P! X2 m
<base href="<%=basePath%>">; e2 I, ~/ J; v) f
<title>My JSP 'ds04.jsp' starting page</title>
4 q I8 `# t* m$ b2 `1 P! s' m
<span id="tiao">3</span>
9 e8 }* q6 j( \& c8 i+ N& D" o
<a href="javascript:countDown"> </a>秒后自动跳转……
+ R8 X, t! G t
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>6 @+ F( u; c+ B! {4 [# f9 S3 H. h
$ E3 V$ z! j* R) Z
<script language="javascript" type="">
$ t( n8 `3 M. S& h$ ~
function countDown(secs){/ Y& W$ _) W J8 r
tiao.innerText=secs; U) ~+ k4 ^) t6 x
if(--secs>0)
0 R8 \! R. W2 n/ H1 |) n3 V2 i
setTimeout("countDown("+secs+")",1000);
# Y! c2 w. o! u! \# c& X8 w* @" Y
}% m& k2 c- t2 b& Z
countDown(3);5 I( ^/ {" e6 t0 j4 L5 o
</script>
% C" R- g' |9 F4 t% q- S. f
8 q6 g% q5 F$ \! i& ~: Q
</head>

复制代码

例6:

<head>
; l: }8 p( R) I% s
<meta http-equiv="refresh" content="2;url='b.html'">
; O* M* ~/ C( Z4 Y( l0 O
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">7 I' Y/ L. ?' e; y
setTimeout("window.location.href='b.html'", 2000);
( H: ?7 f8 F7 `. X
//下面两个都可以用! W; T% Q5 A/ l2 t9 ~
//setTimeout("javascript:location.href='b.html'", 2000);
: C9 s1 i# g. T+ N: q3 l8 N
//setTimeout("window.location='b.html'", 2000);3 e' u h) C# ^ U; H
</script>

复制代码

例8:

<span id="totalSecond">2</span>
% c- [! o" ?1 X3 V4 x' B
<script language="javascript" type="text/javascript">. W8 `4 V, S( _, r: x) f0 N
var second = document.getElementByIdx_x('totalSecond').innerHTML;
& F8 E5 C' Y1 q# A3 w, w! W
if(isNaN(second)){1 i# z. D: h, |4 B
//……不是数字的处理方法
3 @# s+ G, Y, W6 i9 n
}else{7 P( v4 t2 }* h: e& m* N M. Y
setInterval(function(){
- r7 e, r% c8 B% i8 B; H, x4 S/ E
document.getElementByIdx_x('totalSecond').innerHTML = --second;* _6 m8 k* e; d! m" z5 `. P3 \
if (second <= 0) {1 r0 C& X1 z6 V% W1 ?
window.location = 'b.html';. X3 f- p/ h! e* w6 Q9 i* d% _" Y
}4 ]: C# E7 F; t5 O. |% Y
}, 1000);
- S. C& X& N0 j+ p: h. c1 W
} 3 B& i6 s6 G! n) U u
</script>

复制代码

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

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