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

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

1，只执行一次的定时器

<script>
! c; B- u& y4 q2 H
//定时器异步运行 ' `5 z1 l$ T: L/ g( |! }
function hello(){ + w( \8 @, n w3 z0 G
alert("hello"); $ p; o' g r0 Y$ A% _: N0 l, r
} 3 h. B6 M, o4 f: |
//使用方法名字执行方法
9 c+ r' R0 U( u8 h3 ~4 [: w9 t3 Y
var t1 = window.setTimeout(hello,1000); * Y6 R5 Q) N9 W- F2 D; M
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
9 ]4 s9 ~3 K# @5 t6 \
window.clearTimeout(t1);//去掉定时器
8 G. `4 D: g5 A+ v" f/ M
</script>

复制代码

2，重复执行的定时器

<script>
( [8 z$ b O" r
function hello(){
; N' ? L- H! Y
alert("hello"); / J8 x( ?8 A6 Y
} . W# x e( h+ j) k4 Q
//重复执行某个方法 3 h6 i6 i4 U8 q# G3 s( o
var t1 = window.setInterval(hello,1000); 5 e: ^( e1 v7 o X3 Q4 ~- r4 G7 w, q
var t2 = window.setInterval("hello()",3000);
* A. _3 s& } O
//去掉定时器的方法 5 A0 p# V4 ~2 i) Z/ `
window.clearInterval(t1);
0 d2 Y: @! ` v- Q, y
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
1 w5 j; o4 z: F7 m3 ~- m8 n( M2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成% T+ s* R& l' T5 M @
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。( w, |5 [# r4 ?' [) r& X, |
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。, w% G1 E5 d* q0 O4 j0 R2 O3 g
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现， f7 Y0 U" \2 Q+ r, s9 f' p
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
: a% l5 X+ z# i1 }7 ]2 K2 z, D比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
+ \5 F% r" R/ {# u8 P# usetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.2 v2 k1 @2 O/ u: {- F3 j( [' J
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象+ @1 b/ R' j* W# [/ f: Z9 o
clearInterval(对象) 清除已设置的setInterval对象

略举两例。/ N: O \- f3 h3 w& n6 {. J2 {
例1.表单触发或加载时，逐字输出字符串

<html>
& \+ T1 P3 {1 O' S2 ]# D
<head>6 K3 F$ ]2 K( w1 m0 A
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 f: H/ U& V4 N4 |" V$ z7 x
<title>无标题文档</title>" _. ?2 V6 A/ w* T: S, f# a
<script language="JavaScript" type="text/javascript">
; Y; T3 v: U0 l, K# u/ e
var str = "这个是测试用的范例文字";; m$ a% j! l6 |+ u8 b0 Q, ^
var seq = 0;
$ y# h A: C! f/ x! L
var second=1000; //间隔时间1秒钟( i- r) ?4 E# J& d% p# N
function scroll() {5 m5 @* X: L& T+ m+ r1 i4 \+ R
msg = str.substring(0, seq+1);3 \- V' ^- ~) ?# c: [
document.getElementByIdx_x_x('word').innerHTML = msg;! T7 n4 l% _) E: Z# m
seq++;# h" K$ D' h, u( g! _; C$ P9 D
if (seq >= str.length) seq = 0;
! K ~% |8 D# e' g& F8 e
}6 ?# [& n D7 s4 j
</script>& ?' [/ O8 B7 f
</head>
/ ?; ]$ e {0 U: f# H
<body onload="setInterval('scroll()',second)">2 B5 @' \- s6 D. {3 V2 k6 x: ]( o9 }
<div id="word"></div><br/><br/>
0 k' Z9 M+ d3 f1 w' ^
</body>
- T/ R5 Q( n4 N) y; `; Q2 ~! {) k$ N
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">9 L1 T( u S c% q# G
<html xmlns="http://www.w3.org/1999/xhtml">
% s3 |0 b; f% }: J) |& L' x
<head>
# g' P; y9 P8 h' K/ Z' }" u
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />. m4 ^, o. }! k
<title>无标题文档</title>
2 G; R4 W! L) |
<script language="JavaScript" type="text/javascript">: G, b% X/ u: ]# E
var second=5000; //间隔时间5秒钟
# ?- Q" g# }/ j! n# t3 V6 ]
var c=0;3 t+ C) c% p9 H0 ~6 W- Z
function scroll() { P; t. ^7 y3 @5 [% i2 n
c++;2 p0 K3 g1 Y4 g5 c
if ("b" == document.activeElement.id) {; V4 u, O0 @& J$ y' G# p% @3 R7 S& x) S
var str="定时检查第<b> "+c+" </b>次<br/>";! V3 y8 ^4 w, a' j9 N+ O* V: {
if(document.getElementByIdx_x_x('b').value!=""){
4 e2 P" B( ~; J
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";" l, k4 {$ [( S e9 u9 ?# o" ~
}
8 o$ m1 {! e) P0 \2 q/ p% W
document.getElementByIdx_x_x('word').innerHTML = str;
, m5 w) f; T, ?+ r( i2 Q; c) F
}
, d, u/ N7 x- E- S8 [
}/ @7 q/ N& ]! M8 U+ S+ [
</script>
4 p4 Y. b5 R) x
</head>
& r7 a+ H" ?2 D. V F
<body>
9 s) b' Z( m, A- }1 J/ o
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
$ V6 ?* f# y$ l6 L: L* B
<div id="word"></div><br/><br/>
$ y" V% u) O# h# j; e
</body>
% P. U: d$ M5 w3 V5 c$ e5 L
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml"># @5 o* t+ G" U9 `4 ]+ a9 v
<head>
9 q* G& c* n5 g3 E4 s
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">* N0 x0 Q7 s* E( \8 _* J
function count() {
; J' G% T# I! @
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";' A7 a2 T ?/ e9 ~/ J; t: ^4 S
setTimeout("alert('十秒钟到！')",10000)
+ q2 }; r$ [! @7 B% z: I+ _) S' s
}
1 K; i- E& q7 N5 b
</script>
! Q# s* U' p9 K
<body>
- f5 [' H% ^/ k2 r" s; l. g
<div id="m"></div>0 _' e% m, K! ]2 Q
<input TYPE="button" value=" 计时开始" onclick="count()">: A: f% t1 @8 z* j* Y$ ]! @
</body>6 G. ]7 h4 {# l( `$ A; P! N
</html>

复制代码

例4:倒计时定时跳转

<html>
3 f/ T1 Z1 M+ d2 \ k9 v c
<head>
6 ~6 c, B; m3 z
<base href="<%=basePath%>">
; o" R& ]3 M5 f; g) G- T0 n& z) G
<title>My JSP 'ds04.jsp' starting page</title>
- s* {# E5 t- J" J: e" q& G4 L
<span id="tiao">3</span>
; r, O: M$ `9 R4 Y! A
<a href="javascript:countDown"> </a>秒后自动跳转……
/ p) |, T! M( s: J* B5 f- {
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>& f. \$ P1 o; o- _; B
, V, i4 F( F3 t1 e% x
<script language="javascript" type="">( g! Q' Y g% M
function countDown(secs){
( ~" t G8 V/ ^% Y: w' \
tiao.innerText=secs;
# U* e$ F8 j) D5 F, y
if(--secs>0)
* Z$ }7 \' b* R. W. W/ x
setTimeout("countDown("+secs+")",1000);8 ]. T6 }9 ^+ D5 K& x
}) f+ P9 ^% i4 S0 R; k
countDown(3);
+ W0 {$ r r5 @6 V- a$ a
</script>
2 V. u, _" r+ q9 s0 j8 a3 Y
* E3 E$ Z* x+ E& Z) }' Q9 j2 `
</head>

复制代码

例6:

<head> 8 v( }) y; |* B6 W& C" a
<meta http-equiv="refresh" content="2;url='b.html'">
8 f" W4 F; F( F' y( N
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">: y5 p4 z( k' V' e. [
setTimeout("window.location.href='b.html'", 2000);" p( O9 J6 D* M* d% L- A/ B
//下面两个都可以用
) ^) x0 t( z M2 O) u N- I5 f2 ~
//setTimeout("javascript:location.href='b.html'", 2000);
3 m5 v% v# t, w
//setTimeout("window.location='b.html'", 2000);
0 {. d" N- l; F1 S
</script>

复制代码

例8:

<span id="totalSecond">2</span>
/ \0 f0 T7 r+ B0 r" @: v# ^& P! D
<script language="javascript" type="text/javascript">$ _! B' t3 g- p# f: i# R n7 q
var second = document.getElementByIdx_x('totalSecond').innerHTML;
9 F; ~7 \$ U8 k7 b$ t
if(isNaN(second)){
9 G" V& P- b4 t4 `: Q
//……不是数字的处理方法: t: I! V: R: k
}else{/ G, m& g$ `8 @0 t, R
setInterval(function(){
# X6 M* X1 K. T4 c
document.getElementByIdx_x('totalSecond').innerHTML = --second;6 A% a( O# q9 g9 k" U. m4 S1 D
if (second <= 0) {
, X3 }8 u' }# r3 R
window.location = 'b.html';
9 h/ }% k1 \1 w- N. V/ `* f
}
) @- f& d8 k' l: b7 L* X
}, 1000);
7 s5 V% e; p8 w4 r% L% p+ \8 w+ G
} - m' ~: c( z% T" W- L# h$ t
</script>

复制代码

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

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