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

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

1，只执行一次的定时器

<script>
0 M7 H% l$ r( C6 e* t3 f
//定时器异步运行 4 s1 O8 R k$ f5 r) Q" H9 c9 K; L* h
function hello(){ ; I/ C* j6 ?1 C- T- o f
alert("hello");
" J/ w9 D" ?0 W
}
" G" d$ l$ R0 K
//使用方法名字执行方法 3 y5 ^5 c* G: H5 `0 z( p" z; G
var t1 = window.setTimeout(hello,1000);
% L! a3 H' \) X8 {
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ; i( V% P+ ~6 {! H N
window.clearTimeout(t1);//去掉定时器
' m, U7 G$ S9 F- j
</script>

复制代码

2，重复执行的定时器

<script>
2 p" N, H* j% Y" Z( d4 {
function hello(){
4 ~( i3 y% S' U' Z: t) K
alert("hello"); 6 C6 z. a) I2 @6 }& X4 M1 p5 E
} ( c: Y$ P) D3 q% }" Q6 g2 B
//重复执行某个方法 $ ?! F! v3 [# q: c8 ] @: n
var t1 = window.setInterval(hello,1000);
# Q5 s$ W, Y+ x# X( R1 G
var t2 = window.setInterval("hello()",3000);
) Y' f4 V# Q" N) f9 I/ V
//去掉定时器的方法 " @( N. ?. R3 x, H: c
window.clearInterval(t1);
, _- i7 R" k! H* e; ]) P
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
! t2 k+ d2 n% D0 J0 p. X2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
: s% m2 `# p: u4 P5 P1 i$ @* c“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
5 m* _6 c! w4 E) _2 f2 K　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
" g$ G. u# a1 z% j. d* y* c( R比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，7 P# a \& l: U3 V8 r1 u& J
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
V# U4 h. n) T比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
7 X3 j, |/ V- c" {setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.+ A" I4 l7 V1 \ m' m
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
/ A5 c9 x$ [' y8 r/ FclearInterval(对象) 清除已设置的setInterval对象

略举两例。
2 H+ f4 U) k) T% k- m$ T例1.表单触发或加载时，逐字输出字符串

<html># `1 D0 C: v( n2 y
<head>
}3 P& g; i! X+ G5 p0 d
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />& D$ s1 x" @/ g
<title>无标题文档</title>
1 |7 V$ s, C1 F; D
<script language="JavaScript" type="text/javascript">6 D: y4 }% W: H7 I) e
var str = "这个是测试用的范例文字";
+ s$ M l* A; Y5 Y
var seq = 0;
- w v1 m2 K$ h: x1 k
var second=1000; //间隔时间1秒钟. D( K! A. K/ _- O0 G
function scroll() {
+ e& W s" S& F0 Z7 G+ p' m/ q6 ^: ^
msg = str.substring(0, seq+1);# Q7 G& F- m! z" }. |" S
document.getElementByIdx_x_x('word').innerHTML = msg;/ U5 {6 p# D5 F9 p3 z: o7 z
seq++;" D$ N0 T* a$ n7 ?
if (seq >= str.length) seq = 0;
# s/ ?' u* [0 _' j% {0 f
}
$ U: C( m( E; O X1 |. N3 `. O
</script>
: C) `- _, s& H S5 ]
</head>
& x$ u! K, a. W$ S( n" J
<body onload="setInterval('scroll()',second)">6 J; y4 k0 b \& x' y3 G
<div id="word"></div><br/><br/>
2 Z& ^' |5 i! M6 ]9 y) D
</body>
, D' @5 u" H2 _8 Q, p( y, w" T
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?9 m. V0 R: j4 T; s
<html xmlns="http://www.w3.org/1999/xhtml">3 Y/ Y) U6 |8 Y8 l* C2 a3 {
<head>! W- K8 k! Y. v6 {
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />1 e. R( E1 h0 O$ {
<title>无标题文档</title>
( a+ R; p5 v6 g# k7 O
<script language="JavaScript" type="text/javascript">
" Q* U, X1 y V0 J
var second=5000; //间隔时间5秒钟6 f0 \0 ~5 l6 M
var c=0;2 |! |# q& \0 m. C
function scroll() {
- [ o! t5 P P! }
c++;0 k1 Q" [! ]: b0 d0 f9 ~
if ("b" == document.activeElement.id) {
9 T( B0 d& }& g& |! t8 }' ]
var str="定时检查第<b> "+c+" </b>次<br/>";
- c4 H. b3 \ B
if(document.getElementByIdx_x_x('b').value!=""){/ B& S6 }! f$ T. [/ H; H
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";4 w# F! w J: R9 @% Q- h: B% B& }
}4 u$ O6 t) D: v' W
document.getElementByIdx_x_x('word').innerHTML = str; \9 @" F/ I0 r
}
0 ^& T/ W* K! ]" `. l1 h
}
3 i" c, K; N, g1 [( L; z7 q
</script>. t$ f; u" Z g* j! t
</head>
3 i) s* k4 c, V Y$ j& F
<body>$ F& Y' a3 o6 @. y( N; ]
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>7 v ` |5 c' C+ c
<div id="word"></div><br/><br/>8 T2 ?8 n/ ^3 Z/ ?8 C
</body>' M( ?3 \2 r+ m* [( _
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">8 I$ z. l# v; Y" D* @8 d
<head>; C. `' g( x H+ T$ V+ F6 Q
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />1 C5 s/ f2 |% n* K! O! p% y' ~
<script language="javascript">! [0 i9 Z; N6 K, B- L9 N m' p6 k
function count() {" K$ ~5 d% y6 c
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";7 @( d& A! X" O. w( U$ p+ I
setTimeout("alert('十秒钟到！')",10000)
1 k, o% K2 [& [3 C/ R# _
}- |1 j# l6 h! n# C6 v8 v
</script>
+ r; j, v! A( n
<body>
# m/ |( n! S0 y9 E6 [
<div id="m"></div>
: b+ Y2 ^8 z/ [7 K7 X5 h! h; D$ H& f
<input TYPE="button" value=" 计时开始" onclick="count()">5 H5 s& [' A- F) U' R
</body>
; b* m3 `5 ~ W3 v
</html>

复制代码

例4:倒计时定时跳转

<html>1 j( a. o8 A$ M: \# b' j3 J, k/ N
<head>
, e. ~% w; l0 t, j0 u/ J% U7 t/ E( B
<base href="<%=basePath%>">6 E8 q; R% x7 Z. M
<title>My JSP 'ds04.jsp' starting page</title>
; G# S F' N5 u4 n- |4 B" N; k( m
<span id="tiao">3</span>1 { q$ b- C3 m' g" ^
<a href="javascript:countDown"> </a>秒后自动跳转……) O8 c5 u3 P' b
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ G s' m2 j1 ^# a$ C5 T
& t5 ` m( ]; F0 j
<script language="javascript" type=""> a t* p+ m: v; `' Z1 g/ }- _( X
function countDown(secs){' n+ x, ?2 f5 L/ \& Z
tiao.innerText=secs;4 L* O. _7 f* G3 U' @% a R
if(--secs>0)
. r% i; o" X' V2 u: c
setTimeout("countDown("+secs+")",1000);
3 o7 `$ V: ]4 j% u5 l: j
}) h1 H5 q0 Y! n+ C
countDown(3);
4 j( l6 J5 L1 b9 V
</script>
% Z. D5 q% u9 r9 i1 G2 Z- O
0 r' a! ?+ [1 E7 h1 k5 e5 ?
</head>

复制代码

例6:

<head> ( Q# D) v: R+ e ?7 F5 y! r* K
<meta http-equiv="refresh" content="2;url='b.html'">
9 _9 u) ~+ O$ ~( c1 U, S
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
# c1 R$ a& ]( y( R2 }4 b$ S2 p
setTimeout("window.location.href='b.html'", 2000);( d0 Q: v: h6 T! F: y _0 n7 @
//下面两个都可以用
6 ~9 J" J# |, I" L# ]; d+ D
//setTimeout("javascript:location.href='b.html'", 2000);
( ~# T; k0 }9 V
//setTimeout("window.location='b.html'", 2000);* [& |( O: Z: n8 T6 K0 K
</script>

复制代码

例8:

<span id="totalSecond">2</span>
$ d$ b; U B v7 u2 b
<script language="javascript" type="text/javascript">
S6 U! V6 y' E
var second = document.getElementByIdx_x('totalSecond').innerHTML;* m, m! a& h& t% f
if(isNaN(second)){! L+ U- F$ [& n4 G* x
//……不是数字的处理方法6 j% w5 {! H7 J, `" b) n
}else{& T( G- T( q, O5 A
setInterval(function(){" h- r" j* q9 Y- u( R4 H$ [' ^
document.getElementByIdx_x('totalSecond').innerHTML = --second;
9 f" y, w6 x! ]& `1 z# C; R1 ~
if (second <= 0) {: I6 W/ q5 l3 ^
window.location = 'b.html';
, k7 L1 c- r* X$ z* J7 j: h4 b
}: c9 A! z" w8 _- H
}, 1000);# p8 M4 i! C. p" o# u$ |
} $ t: n/ q/ @! _3 H1 v3 x+ Z7 K
</script>

复制代码

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

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

浏览过的版块