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

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

1，只执行一次的定时器

<script> 3 W+ W3 r9 [7 D U
//定时器异步运行 ' Z' D7 G$ a3 T! K0 I; D
function hello(){ ! }* V3 }, G1 }1 r) z& Q
alert("hello"); / V$ O1 r# O) X
}
3 g0 Q- _5 h: y1 m7 q
//使用方法名字执行方法
$ a( Q) n: [7 H' o2 T
var t1 = window.setTimeout(hello,1000); " p" v# p% j9 G5 _+ V, f* y
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
: Z1 M0 h! w# v
window.clearTimeout(t1);//去掉定时器
5 Z" K) w; C, I2 P
</script>

复制代码

2，重复执行的定时器

<script>
/ f# h! _2 V3 C8 G
function hello(){ " ~* C; h+ T9 C+ { A8 d- `/ Q U4 w
alert("hello");
2 J+ l% A( s+ y# K
} 5 |" B7 E; j& a2 q* o0 N
//重复执行某个方法 " S$ e. v9 g- R4 v
var t1 = window.setInterval(hello,1000);
# J4 t2 {" J" b+ a4 ~) N2 s$ E2 j
var t2 = window.setInterval("hello()",3000); ; j& Q% V" `; F
//去掉定时器的方法 & c; K5 I% ?7 ]( v9 B: Y9 l
window.clearInterval(t1);
5 I2 v) d! k1 D; D
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);% O# m( E3 E& C h% ]1 ]6 W! H
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
7 W: o6 H! t o“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
9 i% ]! n( h; I! c1 b* f　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。. a# F7 {- d5 C# Q0 _" w: E( j
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
% b: h6 V, Q/ A: ]5 Q, A8 r) l则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
, r! u. ~! V) Z& X- t: Z比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
' J, F% l4 e4 a/ [( a6 P& fsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.% Y" j2 p0 x6 Q; ]" @9 Z
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象1 ~3 f5 n& I; `- I" Q. b/ h U
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
$ ^1 j4 `, g. x" C. X$ _6 q5 P例1.表单触发或加载时，逐字输出字符串

<html>" p1 M* Y* @" R" t4 n
<head>
* p$ Y q' x3 R( J. b8 n( x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! A* G. d$ r& K5 U
<title>无标题文档</title>9 `; c5 w0 J* N' @) H
<script language="JavaScript" type="text/javascript">% L% m- v, O& e, ~7 h9 v+ p' I
var str = "这个是测试用的范例文字";) f( T" g9 O* Y* j9 l; ?$ B
var seq = 0;( g* S# v6 ?0 p7 ~! r$ {
var second=1000; //间隔时间1秒钟+ Z2 b' Q$ A5 j0 Y2 f! R/ r
function scroll() {+ F9 Q0 Z8 V# h9 B
msg = str.substring(0, seq+1);
$ i7 s* n# j: L' J% Z* T& z4 O: O
document.getElementByIdx_x_x('word').innerHTML = msg;
+ t/ |& b; ]4 u8 _3 {
seq++;
6 F0 W$ B9 c \
if (seq >= str.length) seq = 0;* X$ i/ u4 I7 s; x& q! F
}$ C3 H; L: i5 y: t W$ ]9 k7 d
</script>
* m. W, N" r: d% X
</head>
- Q( T v% i9 r' A# {+ e
<body onload="setInterval('scroll()',second)">: G/ c5 i& V+ ]$ E
<div id="word"></div><br/><br/>* Z! u$ c9 {" d
</body>% T, q6 D0 q, \) q) v
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
# T4 u1 R5 L9 e
<html xmlns="http://www.w3.org/1999/xhtml">
) M' _" b' U, U9 W. f; H6 k% j
<head>
3 J: U4 @# z8 }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># C3 r) \: `8 k9 c* r: h8 n: {: Y
<title>无标题文档</title>
9 G5 {, S2 |+ \! R% X1 z+ D
<script language="JavaScript" type="text/javascript">$ v* V5 C$ N7 Y Y( P
var second=5000; //间隔时间5秒钟
" s' Z% E! a- @! h* k1 I
var c=0;" W: |/ d" i8 a. ^5 u
function scroll() {
6 v2 e: m/ V& L- g/ D
c++;, h- `5 e' E' i4 [6 |4 l+ k- t
if ("b" == document.activeElement.id) {
3 R) h5 Y9 p: F" [" F1 B3 A0 a
var str="定时检查第<b> "+c+" </b>次<br/>";& [! k3 Y8 c1 B' v; U0 Y% T: ?
if(document.getElementByIdx_x_x('b').value!=""){
2 p7 [: h& Y$ u8 G9 [) D8 x
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";. t3 E& W3 l) ~& E# D: ^
}
4 w& `7 \0 S4 O- y5 C
document.getElementByIdx_x_x('word').innerHTML = str; ?. J4 ^8 U4 |4 V2 E
}) L. K1 Z) \& v0 M" q. \
}+ [& I% T% ]. `0 r# u7 |
</script>
1 ]; {1 t9 y! W
</head>
; S; R+ U" C% n3 ?5 g. D! n
<body>0 L, D% | P1 H: r/ U5 ]0 a
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>% ^% F: y/ \, E8 `, \! y
<div id="word"></div><br/><br/>) x! x! Y0 u" {+ K# Y( R; o, h
</body>
! d" V' X) n% C$ w Y; w
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">* p$ }- {$ f+ K
<head>
r1 C2 l: m$ E
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6 n! B3 G" j: p9 F) x
<script language="javascript">
- U9 Q/ |6 _% u
function count() {. c* H8 X# x2 O5 q, z
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";4 J7 W7 a, p4 E( w
setTimeout("alert('十秒钟到！')",10000): }* Q7 U, R2 v" [( k
}
+ `& [! J+ _+ }+ O
</script>; g/ ]2 \6 g* M# W: a. x+ Z/ b
<body>
; u/ {( l& H5 e0 _5 J
<div id="m"></div>. q) V) l' ]; `
<input TYPE="button" value=" 计时开始" onclick="count()">) T" a6 U0 o& `) _ J, _5 L: g
</body>- K- d8 N& p& [6 u$ T
</html>

复制代码

例4:倒计时定时跳转

<html>
# x! m; B/ {* ?7 W, `! F
<head>
<base href="<%=basePath%>">" Z. e" ~# t# \, D# s
<title>My JSP 'ds04.jsp' starting page</title>0 F+ d6 n( z% b1 w* Q
<span id="tiao">3</span>$ i0 T/ f* d% r: v9 i; j
<a href="javascript:countDown"> </a>秒后自动跳转……0 F* Z% e2 i5 W) W! `' q9 r: W
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
* {" ~! g) U9 j* e
2 A# ^- m5 D# A3 D9 x% N
<script language="javascript" type="">
# A/ d% y: v0 ^# y+ t' M
function countDown(secs){$ v/ C' z6 {; i" ]3 H' R
tiao.innerText=secs;
! x+ n( |4 G# Z1 j1 z) v6 V$ x# C
if(--secs>0)
+ y* n- U- y9 A( V; S# [
setTimeout("countDown("+secs+")",1000);$ T9 J& b* n9 z0 L/ g4 I7 m! |8 I
}1 S1 `7 }6 U7 `* s- c
countDown(3);
$ s2 ]( J: B; f( u3 f# J$ O6 ~
</script>. Y& I( r* s; h. F" K
8 G' J9 R5 `$ A" A! y! \3 i7 R1 P* x$ C
</head>

复制代码

例6:

<head> 6 ^" @) f& T1 t: H7 y0 t+ F
<meta http-equiv="refresh" content="2;url='b.html'">
! g- i* m0 H3 A6 b; ?* [
</head>

复制代码

例7:

<script language="javascript" type="text/javascript"># G0 o' h' ^5 b0 _# l1 z, G
setTimeout("window.location.href='b.html'", 2000);- {' O5 d' d% m/ x( t
//下面两个都可以用3 p S. l8 g6 ?
//setTimeout("javascript:location.href='b.html'", 2000);# b2 {2 c9 V) Z
//setTimeout("window.location='b.html'", 2000);; Z! s6 n/ r S( g/ H* S+ }
</script>

复制代码

例8:

<span id="totalSecond">2</span>
! f# y2 G8 t2 n, V$ N
<script language="javascript" type="text/javascript">
8 \7 W- E" q" C% L
var second = document.getElementByIdx_x('totalSecond').innerHTML;
( ~! N) C8 H- `( S6 ]. \
if(isNaN(second)){
& X7 G; [) y# v. m
//……不是数字的处理方法8 P y4 W4 I7 ]6 M B. k0 N3 _, l3 \
}else{
# w V" I3 y. U2 e2 w6 m
setInterval(function(){. S! y# P+ O x* ~% u% E
document.getElementByIdx_x('totalSecond').innerHTML = --second;
) x# @3 T# ~# R" ? X1 q& B% z, G
if (second <= 0) {
: m4 a& {: K8 o8 }
window.location = 'b.html';
}
7 M. Q* X7 o/ o9 g C
}, 1000);
0 s% |2 z3 D b( h) O6 V
} % A3 D C6 }+ L) s( R- e/ y: q7 t
</script>

复制代码

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

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