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

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

1，只执行一次的定时器

<script> & p. |3 g1 r- E/ |. M
//定时器异步运行
$ U, `' F4 T( a* x" y
function hello(){ & \ M7 h3 o+ y D \+ i
alert("hello");
9 S& u- B7 `: W) j c
}
/ P- Z6 j$ {' ^; Q1 j
//使用方法名字执行方法 0 D( q+ w2 e. W) M6 v
var t1 = window.setTimeout(hello,1000); ; Y" A0 T( V' D7 z. ], d1 B0 ^
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
9 @0 h3 @; h$ V: {3 y
window.clearTimeout(t1);//去掉定时器
\8 F( M8 }4 r
</script>

复制代码

2，重复执行的定时器

<script> & h. s+ A9 C, K8 v: s; Z
function hello(){
2 Q3 W+ L& k( X3 m+ f2 a% F2 g
alert("hello");
# |' J0 K" X- _8 y# \6 w
}
4 f* l: B P4 C$ o) e
//重复执行某个方法
+ v9 d1 R, x: _! {5 m
var t1 = window.setInterval(hello,1000);
$ _0 V1 O K0 ]. D3 y
var t2 = window.setInterval("hello()",3000);
: O! x6 {) p) G, m$ O
//去掉定时器的方法 ) ~+ Q( [& e$ ~! D" O9 b
window.clearInterval(t1);
3 G9 G+ c" g5 q. D: D
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
- r) E i# K) R2 A2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成( z# M+ h2 A6 ]
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。8 N9 E' t3 \: a- F0 C
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 p+ j4 T! ~$ x' R {! v, b
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，9 }* v5 i* I8 J" q2 z" r/ \
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
# R. K1 v: B6 c' D: |& H比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。 I! b4 u3 E* p
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
6 [; Z+ }* [6 [; C; \setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
}, ] {, W$ n9 bclearInterval(对象) 清除已设置的setInterval对象

略举两例。* |! X- g/ ]# X% l
例1.表单触发或加载时，逐字输出字符串

<html>; _5 x$ c2 f( R% n( z$ |
<head>( D" k/ i/ ?! v) ? U2 N. w9 Q
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 m) s: _4 Q3 g7 h3 Y9 |
<title>无标题文档</title>: M' U6 C' J% d3 C
<script language="JavaScript" type="text/javascript">
) |. ~% D. ?5 r- n2 W
var str = "这个是测试用的范例文字";
; O ?$ ^4 c+ q3 X
var seq = 0;1 P& N5 G8 c( O) r, @9 I9 O6 N4 ]
var second=1000; //间隔时间1秒钟7 H% y' k% P; _& D* R
function scroll() {7 G, ^. T/ U6 ?2 D
msg = str.substring(0, seq+1);
7 e" T) S$ m6 B0 F) d8 T
document.getElementByIdx_x_x('word').innerHTML = msg;
3 b' s/ z- b) i0 s
seq++;
4 X1 m0 n/ ^$ k. ] z! m
if (seq >= str.length) seq = 0;8 `0 v9 O& Z7 Z* k7 j
}8 a ]- B$ B2 |+ M; m7 K! V( ~
</script>
K: T2 g) f4 R, w/ [* [
</head>
. W* e) `5 W3 B( H+ C
<body onload="setInterval('scroll()',second)">7 J( J" ]+ T# O" Q% e4 N7 V
<div id="word"></div><br/><br/>
5 u& R1 x5 A+ r1 V
</body>
/ D r2 G9 @% g
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' a# p' q5 x5 w( A, u
<html xmlns="http://www.w3.org/1999/xhtml">
, _+ |+ Q7 @3 ^% ]* L% X2 i
<head>) o' y! p4 l; e. j4 W0 N& }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ o: a& \" |' s% Z" \
<title>无标题文档</title>
/ p& M# R% y. h# v$ M* S
<script language="JavaScript" type="text/javascript">3 A% C' G' ]2 s" f3 y1 o+ H
var second=5000; //间隔时间5秒钟
) h' P. i5 M9 h5 W# g. w0 }, A
var c=0;
$ D |& z O6 {( i" t. S* r/ g. u
function scroll() {
9 Z6 d: J2 ^( h- z4 J Y9 X& I
c++;
5 L3 y/ Y; X( x. Y9 [
if ("b" == document.activeElement.id) {
, m/ V' U4 h' N( j8 Y. o
var str="定时检查第<b> "+c+" </b>次<br/>";
) U, ^# ^; f, a
if(document.getElementByIdx_x_x('b').value!=""){$ I `) j l- q: a: t# q; U# i$ X
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";; P9 F2 p4 j2 D
}3 d/ o6 A% x, w/ K
document.getElementByIdx_x_x('word').innerHTML = str;& V7 J9 M" n: z2 R# m
}
4 B5 f* P! X& Q: \% b) I
}. N% ]: c- o/ W: j, a' |, G7 V
</script>" ]" x9 k: P- e+ D+ u5 m9 t: b
</head>
; [/ M3 i9 \! D! f5 t8 y
<body>& G% L- `% j/ m5 }9 L
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>1 K- C% d; A8 Z$ z0 ]
<div id="word"></div><br/><br/>2 ` ?+ T( ]' Y7 j& q6 b
</body>% F6 b! s3 i! Q; h. I' o4 U; N* n
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">9 M. `$ h$ J! D
<head>5 T# ]' ]) C; h0 _) h. R. V9 W
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
; Q- h3 Y! a1 s( A
<script language="javascript">& S9 z" ~- ?2 R/ Z; _9 e
function count() {( Y4 Q* w# u% T5 @
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";0 G, }2 F, _- s( i1 V! c
setTimeout("alert('十秒钟到！')",10000)
0 z R: ]+ ` \% z2 C
}- _( i+ C4 k/ j0 \ [
</script>* C/ n5 O3 m) v( G7 |0 I
<body>
. B. f5 S/ F6 O# b
<div id="m"></div>
0 w( N9 h$ [- i5 s0 w7 V7 F. j
<input TYPE="button" value=" 计时开始" onclick="count()">6 G0 V9 U; w( P5 X) o: P- M
</body>
, e: W3 b5 _# e, L. b2 u' R
</html>

复制代码

例4:倒计时定时跳转

<html> u' W* q J- C7 ]
<head>
7 v* p5 N6 M7 M4 n
<base href="<%=basePath%>">
- e4 f+ O) `' ^
<title>My JSP 'ds04.jsp' starting page</title>& H9 a0 M% T3 Y5 M: I
<span id="tiao">3</span>8 v+ l6 [/ W: D4 [. f& a
<a href="javascript:countDown"> </a>秒后自动跳转……
# O' W9 `' U( p+ {% y& Y
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
" }) R1 e* V3 z. n3 A# T
. Y( ?1 y! v/ e
<script language="javascript" type="">, R( k9 |& g9 U0 p: o% C6 ^1 l
function countDown(secs){
) H7 g7 I* v( r9 }- w; A
tiao.innerText=secs;
, n: _7 X) q, Z! d8 ^
if(--secs>0)$ l/ z- R) Z5 G" |
setTimeout("countDown("+secs+")",1000);. a5 Z. p7 V4 J. `: h, O
}
; ?8 @/ w1 A' G$ E: O8 n8 O
countDown(3);
8 ^0 R: F3 ~3 x/ Z, E+ e
</script>, q, v3 e) r( i
9 q: H9 y: _0 b! I
</head>

复制代码

例6:

<head>
& v( q% W5 v4 a2 ^, f2 s
<meta http-equiv="refresh" content="2;url='b.html'"> / l2 z9 [. _: z5 C# v7 {
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">: |! X$ n( V5 w0 l* n* D6 s
setTimeout("window.location.href='b.html'", 2000);
: b2 L% q `! Q) X U
//下面两个都可以用) V2 q' j6 v V" E
//setTimeout("javascript:location.href='b.html'", 2000);0 t+ s6 a; y+ A3 u/ h
//setTimeout("window.location='b.html'", 2000);7 m/ H% n2 m5 X( R: K2 E
</script>

复制代码

例8:

<span id="totalSecond">2</span>
$ \# K1 j# F$ V$ m- M. E
<script language="javascript" type="text/javascript">! R1 i5 r, X: O
var second = document.getElementByIdx_x('totalSecond').innerHTML;+ i, @5 @4 X" g( c7 c' t K3 e1 _
if(isNaN(second)){' g# E9 Q3 v$ G7 V; I o
//……不是数字的处理方法
( ^$ I: {3 V* F, B; I. ^
}else{% f( Z4 j: D4 r/ P' e
setInterval(function(){
' J7 a/ h( t; `6 f6 `! k
document.getElementByIdx_x('totalSecond').innerHTML = --second;
8 \. T1 O# z. |
if (second <= 0) {
: n, T1 \7 n( ^7 H5 B5 k
window.location = 'b.html';* E' q, X6 U8 Y1 P' S A' H# n
}
# H' T4 @/ u: y- x: c5 q" B; e
}, 1000);
; k/ s' X9 e% T; s2 G# j
}
7 b6 I% p6 i) T$ x5 l
</script>

复制代码

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

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