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

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

1，只执行一次的定时器

<script> ; j% n! ^& x. T6 Q
//定时器异步运行 ) e) w: E- i9 W$ F |7 ^# j
function hello(){ 9 O# ^- d4 U, X0 C
alert("hello"); . {' D8 l2 x- \ N: h
}
' z8 I, X& M' I& N3 G
//使用方法名字执行方法 5 z! b0 L; }4 S$ L
var t1 = window.setTimeout(hello,1000);
* ]" o# [1 i9 |$ n$ m
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
) [; G5 G4 g: {
window.clearTimeout(t1);//去掉定时器 1 I# R% z% t* b' Z
</script>

复制代码

2，重复执行的定时器

<script>
" n: G2 Z, R1 `' ~) i
function hello(){
9 X" j) d# V3 r7 t7 h6 e
alert("hello"); \! h T6 |1 }0 j
} 6 b7 y0 k. H5 v6 l0 r
//重复执行某个方法
L, M& k4 e, d/ A; e2 {$ o9 M+ D
var t1 = window.setInterval(hello,1000); 2 w" a e* T6 q) v
var t2 = window.setInterval("hello()",3000); 2 c1 z y+ C& z* h4 I" J9 P
//去掉定时器的方法
$ F2 x. n# Y& C2 V6 A: _. s
window.clearInterval(t1);
. n% N e4 i0 m- V" h: _$ I
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);. C8 G4 s/ J7 e e% D& Y: Z/ U
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成3 P: t5 \8 u: e, N& X# c
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。$ ?, a6 N0 V8 ?! c# @- `
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。9 J* F1 @9 x6 Z. d4 D3 M
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
; l% A! k5 j( [ q% O, e' _则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
8 D) G7 K: w. W0 C0 k- d) j比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。0 V& D8 d/ Q h) z5 `
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.# N- M$ F8 u" M0 ?( M& e% \
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
# N5 B: o0 j- F5 b/ t/ TclearInterval(对象) 清除已设置的setInterval对象

略举两例。
6 C- ^. c; F: M0 f3 p- g+ b: C例1.表单触发或加载时，逐字输出字符串

<html>- c. z1 W3 I/ E3 V6 a
<head>
3 s6 B% p A6 e* D0 i7 m" a
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- }) a( I2 ~8 j/ x
<title>无标题文档</title>/ r' O- D7 a5 P/ p3 I
<script language="JavaScript" type="text/javascript">( y: b4 R |) O4 `, K
var str = "这个是测试用的范例文字";& }9 I4 u1 ^7 B3 q2 \, r+ e
var seq = 0;2 V3 ]# E8 a m! c
var second=1000; //间隔时间1秒钟
' B* `4 X. `6 D! S/ |+ L3 y
function scroll() {5 b+ h- N" ]6 @) c: p
msg = str.substring(0, seq+1);
& H& @7 ?; z6 S! F
document.getElementByIdx_x_x('word').innerHTML = msg;
# H& B; ]) @8 i/ q
seq++;
. n4 J1 ~. [3 N. n3 D
if (seq >= str.length) seq = 0;
/ W/ X5 |: o( l% a/ V
}
; R! D# I {+ d) V m. q- t1 [
</script>4 @7 k0 K+ V* r8 x s
</head>" b# A4 K2 x+ g. t5 a0 L3 r0 |0 E
<body onload="setInterval('scroll()',second)">
" Y8 f* o; E- J1 n( O' |$ B- v
<div id="word"></div><br/><br/>, j3 Z$ j& v* M1 f& }+ `, y- g
</body>
0 G0 S" p( l; B4 W0 w
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
. g' r+ A! {( W7 H K1 _
<html xmlns="http://www.w3.org/1999/xhtml">
! J& ?' H: M; x* p( U7 h
<head>: m& o* T2 y6 l8 ?6 K- h$ s' G3 ^
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> R+ a4 k0 O3 K7 a: ?+ G
<title>无标题文档</title>, ]# y( R3 l6 l6 U( d( j3 y
<script language="JavaScript" type="text/javascript">
% \$ {4 H* P5 C ]
var second=5000; //间隔时间5秒钟
; J1 R! t! i- |% Q) g, [4 g
var c=0;( n* h. h, J4 Z
function scroll() { C* h5 u9 V; J7 H( Q/ ~
c++;/ z5 g2 P: C* {9 X6 x( d+ f: T" P' E
if ("b" == document.activeElement.id) {
8 J0 d& R5 |7 c- ?+ x$ c4 X& m$ C
var str="定时检查第<b> "+c+" </b>次<br/>";
) M3 S9 k" O' r* Q3 O3 L1 X
if(document.getElementByIdx_x_x('b').value!=""){
* m: E* r. m7 M5 \4 `
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
- o% z: Y1 \- B' n! J x& W( Z
}
7 d- E7 E3 x R1 r$ j/ E8 u* D
document.getElementByIdx_x_x('word').innerHTML = str;
5 n* C) S* o& E/ k d3 ?0 }8 u- B
}
2 \6 A# d4 ]8 k, Z) Q- B% j. ^* T
}1 Q' v8 M) g" f2 Q% a% R) [ v4 T
</script>7 q" k( C; w7 R I
</head>8 w0 z$ ~! d: \/ ^
<body>$ i, L M$ g9 U- ?4 {
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
% b0 D2 i8 c( {. E C! i! u
<div id="word"></div><br/><br/>
! y/ E5 z9 R+ [, T+ E7 P, S" Q
</body>( H" J# u8 e% p+ k" z
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml"># m+ j0 q0 _9 V" p; C# @
<head>8 ]. w. h0 f2 k1 A
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
( g6 n* W) }/ e5 e s, k% E
<script language="javascript">
5 X, i2 a, \3 @( o) U+ E J6 M
function count() {
9 ?; O6 w3 R4 R' L5 M
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";7 W% @; @2 [$ u: w2 |5 M, f
setTimeout("alert('十秒钟到！')",10000)
3 J: u: @* f9 b5 |) |& c; y. n7 y
}8 Q& l1 d0 u4 G/ q$ ]- x" _6 ^
</script>
3 Z' o! S1 H+ B8 U A' Y" |
<body>
9 p+ ~/ C0 t+ Y) `
<div id="m"></div>1 l0 p+ ~3 K( b9 r1 R4 ^3 k4 O" w# t
<input TYPE="button" value=" 计时开始" onclick="count()">7 T5 Q- m1 ^& _
</body>
. P3 v) w1 R1 S; D% z/ `
</html>

复制代码

例4:倒计时定时跳转

<html># G/ o" O9 s! e; P; c
<head>$ K6 a; m; z: V2 v' Z q( J
<base href="<%=basePath%>">
3 f( \8 {& j8 q
<title>My JSP 'ds04.jsp' starting page</title>4 V% J8 [, }& r% V" T: S
<span id="tiao">3</span>
9 r$ L& u; i+ i4 g. {# ], `# w
<a href="javascript:countDown"> </a>秒后自动跳转……
+ x0 N% z7 C$ D% f
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>8 `; }3 G4 H1 w) x; q( q- B& q. e
2 e1 h# |* M6 Q3 w
<script language="javascript" type="">
* }( U( J& n( L6 s: X3 y$ j
function countDown(secs){" t2 i, `, j) L) r( t4 y3 Y
tiao.innerText=secs;
# }- |1 p& T3 e4 [0 c( Z4 I6 b3 A
if(--secs>0)3 Z1 q( [3 E% x& A4 k6 H! P5 D
setTimeout("countDown("+secs+")",1000);
9 M7 W0 u6 j& a& {! W
}1 ^; F3 m2 k2 Y- Z7 u% V1 F
countDown(3);
7 | g- j$ W4 D$ L3 Z m0 d. E
</script>' x: W, T' |. J' s1 w" d0 q
% h8 H/ r- F: M" b3 g- W
</head>

复制代码

例6:

<head> # W8 g: Z6 {) R: o; p
<meta http-equiv="refresh" content="2;url='b.html'"> , S8 \1 R7 z h: p" U
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
) C6 f$ B5 V9 G, X$ F7 `* f! d
setTimeout("window.location.href='b.html'", 2000);: y4 Y c0 c, T3 Q; f
//下面两个都可以用: g ~8 S& e' \1 I
//setTimeout("javascript:location.href='b.html'", 2000);" R* P4 U6 h1 s
//setTimeout("window.location='b.html'", 2000);; \! ^! p) t7 \" }$ T9 |9 M
</script>

复制代码

例8:

<span id="totalSecond">2</span>
8 q7 |9 l8 @3 E
<script language="javascript" type="text/javascript">+ ?4 W0 q: r% [- |4 u, x7 S& b
var second = document.getElementByIdx_x('totalSecond').innerHTML;" R# |' u' M# t; J1 M$ E
if(isNaN(second)){
2 b7 ^. L, o- s
//……不是数字的处理方法
- S$ _$ t4 m8 K) r" _
}else{1 G: O& o7 u$ G: ]" u( F
setInterval(function(){
m! E3 V9 }8 u$ ?# ]
document.getElementByIdx_x('totalSecond').innerHTML = --second;1 I* e, @5 d3 a7 U" M/ H
if (second <= 0) {' T8 d% n* i# N9 L* R L) K
window.location = 'b.html';
4 ^& i* x Q* s: J
}+ S, J7 C' u8 [7 {, O6 V- M) I6 }2 y
}, 1000);1 z- x) d: j7 Q
} 4 W+ K8 q4 b, G: ^
</script>

复制代码

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

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