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

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

1，只执行一次的定时器

<script>
2 K0 E$ E, s, X2 d- G" g
//定时器异步运行 9 o( ?& I* ?/ ?& Q0 d8 g
function hello(){
8 R) q' l5 f0 g9 W
alert("hello"); : J1 X2 J: k3 |* F' u
} & A1 J* @6 d2 |8 _: ^: T
//使用方法名字执行方法
2 J( I$ b* s. F: a6 P. |% b2 @9 [
var t1 = window.setTimeout(hello,1000);
& @5 j# r2 I2 F
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 - T8 {1 U1 b) _. }3 \3 X [& W
window.clearTimeout(t1);//去掉定时器 . p! }$ l3 c; ^9 y' Y) f$ u# M# }7 a
</script>

复制代码

2，重复执行的定时器

<script> m& Y1 f. M7 v0 e
function hello(){ - s' x# J5 i8 c+ \% E
alert("hello"); , b8 ~8 G9 I5 o8 x4 T# X. x; q8 ?
} ( f5 ]' r: V$ ]
//重复执行某个方法
9 c; G2 h$ `1 B& ]
var t1 = window.setInterval(hello,1000); ) }' j a W3 P
var t2 = window.setInterval("hello()",3000);
}3 U. [1 u1 X6 c! R- U9 k1 ^
//去掉定时器的方法 + _- C" a/ H! s" k* H
window.clearInterval(t1); . g5 r2 k, L8 Q0 p
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);' W' v: g. \9 C- F
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
g: w3 \" y0 e1 S“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。. p2 z0 P3 Y6 @+ g
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
) p0 e1 d0 {$ d6 A6 n, F& o比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，# ?. o' P2 ^# ]$ @" P2 ^5 t
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
% ]! X2 W6 B( S2 A( |" p比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
3 v$ l4 g! n4 O2 EsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
) {* t* q9 k* o* O' W: JsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
. e; {. y# W: YclearInterval(对象) 清除已设置的setInterval对象

略举两例。- A) ?0 `; \, j1 b
例1.表单触发或加载时，逐字输出字符串

<html>* B. F9 N" |* c" P$ Q& s6 P+ I% T7 ?
<head>
\9 s) i. U$ k. _
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
: \! }( K+ [- g
<title>无标题文档</title>, W5 L8 W4 q S; O. G$ N
<script language="JavaScript" type="text/javascript">
) D# S3 @" ]# X. |& [% p5 _; }
var str = "这个是测试用的范例文字";' u: v' S3 V+ h$ p4 {9 ]
var seq = 0;
3 r) U% A4 e& I Q' K5 w+ M
var second=1000; //间隔时间1秒钟
2 p% M( n8 I2 J
function scroll() {
. Z2 Z+ ~* h# o; w
msg = str.substring(0, seq+1);
# w: f8 L, C- _% z6 k: g# `
document.getElementByIdx_x_x('word').innerHTML = msg;3 F6 _3 u3 ]/ D2 I3 B& X9 o
seq++;
" E+ n" B! y3 |# o1 |6 [
if (seq >= str.length) seq = 0;
0 ~0 D+ B/ a2 R% z
}
; w8 m0 A% Z& g" y, `" i. k/ g
</script>9 r) h" c. R* ^
</head>. }. R6 L3 q- p( k* T' |9 z
<body onload="setInterval('scroll()',second)">
0 \% m( C% t( Y5 ]
<div id="word"></div><br/><br/>+ D. O9 h! d3 f2 w
</body>
5 j& H; l- p! E+ }
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">$ @! w6 U) H8 {& `/ b0 A
<html xmlns="http://www.w3.org/1999/xhtml">+ Q0 V1 f- O& L" c5 G
<head>2 T" F! u" X8 o2 ^
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />% [0 v/ V% A& w, D& I" ]
<title>无标题文档</title>
8 `1 v/ Y; O- |4 L! R) _
<script language="JavaScript" type="text/javascript">% _' A4 y ^0 p! V" Q# Y; K9 N8 b
var second=5000; //间隔时间5秒钟. ^* S0 e) U+ e* w+ [5 }
var c=0;2 l7 S! p( f P: k$ u0 O2 F/ o
function scroll() {
+ {5 Z8 ]% ~) ^! @$ W
c++;
8 Q- F9 j. m9 Z7 I" x" b- e, n9 k
if ("b" == document.activeElement.id) {/ n: T6 m$ F! M* R. {) L4 |
var str="定时检查第<b> "+c+" </b>次<br/>";4 I$ o3 h; b. t4 @5 ^& Y
if(document.getElementByIdx_x_x('b').value!=""){
: J, y% H( ~; u, ^
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
0 i: i/ `8 r9 l
}
- A7 f9 ?8 U2 L4 E1 O
document.getElementByIdx_x_x('word').innerHTML = str;
$ K7 k& G( J% u# u/ ]
}7 i- f. C- X- z# \, C3 `
}
3 {# @1 R( ?& |: c8 j" w0 B
</script>' P& ^1 \: C6 h {1 ?. K
</head>6 R* \& ]2 |( l
<body>
# {+ u9 o/ Z; u4 L
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
4 d2 f. U) ]6 x7 n) e1 G x4 m& q# I
<div id="word"></div><br/><br/>
2 P- |, u( i$ F9 b2 ^% R" l
</body> H2 B! n }2 A% l+ x& T
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
. R) j! T) o7 }$ G: D H! }
<head>
( f% }+ J! u. |0 _& ^) w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ @" g( s3 a, s
<script language="javascript">$ B5 t- M" X1 E0 h
function count() {
7 S' W7 D1 ]+ n/ `
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";- W& w. t) }1 ^5 R# f# e
setTimeout("alert('十秒钟到！')",10000): l/ O) b Z8 z' F" U; f7 V6 q# Q
}
& m5 a' P2 W6 w g- @
</script>: m0 [. J4 J$ {7 |6 {0 O U
<body>3 J) h: F6 R- `- x0 K+ `
<div id="m"></div>
( b" m7 F+ Z! P0 R
<input TYPE="button" value=" 计时开始" onclick="count()">" H2 j- p, f/ |
</body>% |. [: Q g; A; H
</html>

复制代码

例4:倒计时定时跳转

<html>& O+ Z% v* x# {7 e* c, W/ W. l
<head>
; b7 h& L5 L5 t
<base href="<%=basePath%>">" z" ~: R ^7 i( I/ W
<title>My JSP 'ds04.jsp' starting page</title>( A5 ^2 }9 V9 a8 C: A
<span id="tiao">3</span>- e) |. w4 I* O: L i: E9 ~% X
<a href="javascript:countDown"> </a>秒后自动跳转……
; o" n; Y# o; z
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>( P+ o0 W& g5 Y1 x0 O: j
4 n. f$ T; R4 d( c7 g
<script language="javascript" type="">; U! b [+ S) `% X4 ~) n5 F% y
function countDown(secs){+ F4 ?0 M4 i l: c% b# |: T, R
tiao.innerText=secs;: S5 @1 g3 K" }
if(--secs>0)
1 J; |% ]# {1 t5 r" S
setTimeout("countDown("+secs+")",1000);
8 _! j: p6 }; r0 B: }2 _
}
0 Q$ f R% l2 l) V* L, B
countDown(3);
7 X2 b4 o" u& c* |
</script>
4 V$ @9 e1 I# u
9 M& u% d# \+ a! X
</head>

复制代码

例6:

<head>
. e& q& Y4 ^2 t
<meta http-equiv="refresh" content="2;url='b.html'"> - l/ G1 h4 I: c7 \% K! ]9 J
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">: f3 m8 `5 N% Y0 X R) S4 J+ ^6 [: X. `
setTimeout("window.location.href='b.html'", 2000);# O8 Z, f. e% P; _
//下面两个都可以用* K$ u$ }) b! Y1 ~$ d2 p
//setTimeout("javascript:location.href='b.html'", 2000);3 M6 g* b k. o" P: z- T
//setTimeout("window.location='b.html'", 2000);' s+ y3 f: Y. d0 F
</script>

复制代码

例8:

<span id="totalSecond">2</span>* A- ~# w5 p5 N- N& n; Q
<script language="javascript" type="text/javascript">' X( s) r" m# Q: y% ~
var second = document.getElementByIdx_x('totalSecond').innerHTML;+ S+ }5 F) r. V, n/ q3 d1 \' w) a
if(isNaN(second)){- {' L4 [/ M/ o. w& w; E% ~$ }$ r
//……不是数字的处理方法7 k; F# q* \/ T
}else{+ G3 w. c: n! W; P6 I/ W) s a
setInterval(function(){
8 c$ l7 _+ l7 k) l+ @- {
document.getElementByIdx_x('totalSecond').innerHTML = --second;
* T8 q( a" Z0 L! j8 Y& x
if (second <= 0) {6 U _0 C/ |5 D" y
window.location = 'b.html';
' t( _7 G7 Z Z6 S: b7 w# t# a
}
% R I- U/ w7 B0 p
}, 1000);; c0 K! N5 i/ ]% o+ A3 q9 ~, t
} 1 p* ~- G/ Z3 \
</script>

复制代码

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

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