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

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

1，只执行一次的定时器

<script>
9 k3 ^* g* q' G8 g
//定时器异步运行
. I3 C3 C [3 G/ @8 O, j. B& \
function hello(){
& y6 d* g1 g( }# y$ D9 U7 g
alert("hello"); ! q& m4 b. `8 w3 B
} ! {' d$ _0 q: }" n/ n
//使用方法名字执行方法 8 a, p5 g7 e2 j/ X5 a$ l; V
var t1 = window.setTimeout(hello,1000);
+ \- B! c: B0 R' a$ d3 G
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 $ U; ^6 B3 H) z1 n% Z2 |
window.clearTimeout(t1);//去掉定时器 # T+ q; B8 k4 B" D. Z$ B
</script>

复制代码

2，重复执行的定时器

<script>
% [9 D! ?$ t! T; ]
function hello(){ # M* K+ t' S; D3 ^$ h- s
alert("hello"); - |! O% Y6 W$ ^* J# |; z
}
( K+ j+ M! h. b$ G) i8 V
//重复执行某个方法 3 ~# _2 S' v* _) }5 n! o% Z0 ^
var t1 = window.setInterval(hello,1000);
! G# r1 n+ ?8 R+ ^
var t2 = window.setInterval("hello()",3000); 8 s0 F% `% n" {! B" E( n# N# z. ]
//去掉定时器的方法
+ X9 S0 Z. Q* ?0 _
window.clearInterval(t1);
9 z K; p- L) l: O I p( e, {0 h
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
; D) ~+ |0 U& r2 t/ _' o+ F+ ]+ N2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成+ j% F9 @. M1 s
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。1 @" }- n) z+ v% |
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 Z9 |: ^5 I* M/ b* s3 D a
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
5 i' ^! Q4 m" o2 l则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。$ `* k2 l+ m; r# ]" G
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
( R- \2 ~9 ~, b3 r' L+ YsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
5 a* Q5 r+ o9 N! T+ N- m& N" tsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
8 h/ q7 u0 u# B- {& g& {! P2 NclearInterval(对象) 清除已设置的setInterval对象

略举两例。$ m o! J; c. c" \. Z( \
例1.表单触发或加载时，逐字输出字符串

<html> ?0 {/ u z2 i% o8 w
<head>( ]# ?& d( C7 g5 g. ^7 J7 @
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 r4 A! D! I' W
<title>无标题文档</title>, U2 E" \$ G6 e# x( V
<script language="JavaScript" type="text/javascript">8 X, W, ?- A F5 {4 P3 r
var str = "这个是测试用的范例文字";
% G* [# c" }" O+ \% N8 D
var seq = 0;
var second=1000; //间隔时间1秒钟" O8 U0 r' B* v g5 y
function scroll() {
! p. M, N" j( G7 ~+ S/ y
msg = str.substring(0, seq+1);$ \, \! ?% t$ T4 a: q2 {- h
document.getElementByIdx_x_x('word').innerHTML = msg;4 \) o% P7 T9 y, r
seq++;6 c# d0 P) H2 T! T
if (seq >= str.length) seq = 0;
5 \0 S, [! \8 c- E* P* G9 W) H
}
0 Q$ F2 }4 i f! n8 p
</script>
+ R4 F) ~+ f! B* l" k
</head>
' i% i+ q9 U# Z' ~
<body onload="setInterval('scroll()',second)">
Y& n% Q5 c* `7 j5 z
<div id="word"></div><br/><br/>
4 [$ Q# v, K: d d* o$ H
</body>! x2 O8 v2 \0 A2 W% r# S- S
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">( b6 C9 W$ F4 [1 H& g/ ?5 f
<html xmlns="http://www.w3.org/1999/xhtml">. I, o' z# Z& T$ i/ h. r3 S
<head>
% Y: P$ j- m4 C
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 C+ |/ x* ~( D: g% Z# [
<title>无标题文档</title>
2 U+ f* l6 ~* [' c8 o! `
<script language="JavaScript" type="text/javascript">
+ h& Z$ J3 U/ O3 \: W i
var second=5000; //间隔时间5秒钟
6 h5 z9 z: l2 U+ f. Y
var c=0;6 s5 y$ M) ~; M; j: }2 x
function scroll() {
- D% M1 i# i' i3 V+ {, }
c++;/ @ I# O# z; e9 j/ B4 @
if ("b" == document.activeElement.id) {
# F& Q- z5 ]- [
var str="定时检查第<b> "+c+" </b>次<br/>";
. Q& M T G* M4 Q. t# }
if(document.getElementByIdx_x_x('b').value!=""){
# \. v4 I0 t9 G, B- A
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
( E1 y* f: d& k2 |! k4 E9 f# m l
}! q/ l" x2 E; N: A1 e4 M
document.getElementByIdx_x_x('word').innerHTML = str;+ t' D- G: @$ q, N+ u
}
9 K8 l' \, X4 `
}
% q$ ^ ]& S4 m; c, ^
</script>6 g: X9 F4 X# j$ u4 i) {/ i
</head>0 t, H" q& @; M; H+ _
<body>: `5 P2 ~$ i1 Y% F7 O6 ]
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>0 D0 ]8 u& O2 }6 A
<div id="word"></div><br/><br/>1 {: W L5 S1 U' H* [1 r, T
</body>
! j1 J: z: b! B3 Y3 P, i
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
; c9 ?+ f: [, u, y2 g9 j' N
<head>
7 F% Z& B* w6 _: ^, h
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ o: c0 U5 }6 H8 Y: w
<script language="javascript">
7 c# r! y3 {/ ]1 z, H
function count() {
4 q7 o9 B, {- v! c u5 X
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";( J, u* x4 U3 g( y! p
setTimeout("alert('十秒钟到！')",10000). n* Y2 R6 r2 l* u4 V
}$ F& a4 F, V- ^: n2 T/ k. p# {
</script>
8 ?; |* w0 Z( m5 D
<body>
1 A; o, l9 V" \: I6 q* Q
<div id="m"></div>& d# @" ~+ L+ e# j4 |. g
<input TYPE="button" value=" 计时开始" onclick="count()">
2 ?0 {% I; k5 T
</body># d2 s: E5 O* j) r0 j) o
</html>

复制代码

例4:倒计时定时跳转

<html>% V$ v8 K1 V/ b7 T' w
<head>
! s1 m3 w E" R
<base href="<%=basePath%>">& |2 [" J% x2 b9 }" ?$ D3 ?8 E
<title>My JSP 'ds04.jsp' starting page</title>( T+ o2 O+ {+ l" x7 E o8 A) j8 B
<span id="tiao">3</span>
# y8 J' Z) T( m, r4 H
<a href="javascript:countDown"> </a>秒后自动跳转……/ o. c L/ j8 J5 i
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>3 @) f9 v- n; i- x1 y1 M6 k9 C9 W
- w/ c9 z0 ]$ o
<script language="javascript" type="">6 S4 J! _7 w! M0 E
function countDown(secs){
?7 [, c9 V7 o9 n
tiao.innerText=secs;
8 }/ P+ w9 m( S; b- w* D
if(--secs>0)
% Z0 B- Q6 T. r6 C# w
setTimeout("countDown("+secs+")",1000);- d2 V9 |9 e, g* w
}
9 r& X5 n; [6 w4 V2 `: g$ l
countDown(3);
# L4 `# U5 }: f, }
</script>; F8 U' ~- M: h
3 w! Z1 [6 I4 F. \6 b7 l5 I, Z
</head>

复制代码

例6:

<head>
7 v+ E2 }4 x, I: L- W) Z; L
<meta http-equiv="refresh" content="2;url='b.html'"> ) O7 R R: ~* o% N i
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
$ q l) _( M4 D( v" i' m
setTimeout("window.location.href='b.html'", 2000);
5 R) \; Q+ |/ E$ J! x5 @
//下面两个都可以用
$ P3 B$ B, R9 v
//setTimeout("javascript:location.href='b.html'", 2000);
! n0 s7 U* F. n: ^3 X: i9 [1 R
//setTimeout("window.location='b.html'", 2000);" R4 F2 H! [/ W5 s% K9 d2 O
</script>

复制代码

例8:

<span id="totalSecond">2</span>
4 P# w9 V% V$ f! k+ S; }1 Z: w6 E3 k
<script language="javascript" type="text/javascript"># E, K' L3 z0 Z! m" P
var second = document.getElementByIdx_x('totalSecond').innerHTML;7 J: z7 i8 c0 T& a
if(isNaN(second)){
9 D$ `% z( l0 p% h, ?
//……不是数字的处理方法% P9 C( S4 E: r7 H* q6 q
}else{
/ ]6 W; n7 _9 T) w& ?, w$ b+ D
setInterval(function(){. E8 w& Q- H( T- U( F
document.getElementByIdx_x('totalSecond').innerHTML = --second;7 ^: x* O2 R% e% G8 T7 K
if (second <= 0) {7 r3 I5 j' A- Q
window.location = 'b.html';# V8 {$ P( X0 @9 j+ z
}4 P7 g: p6 v' O! H( @
}, 1000);
/ t+ W+ O) p# Z3 |; v9 w+ Z: D
} $ _9 e. C/ v6 o6 o
</script>

复制代码

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

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