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

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

1，只执行一次的定时器

<script> ' y6 H6 r& G6 `0 H
//定时器异步运行 5 z$ K/ S. l0 S9 N, |, f
function hello(){
/ u# Z# `$ C. J7 h: [, P
alert("hello");
; k- f0 X: t. }0 O
}
2 C0 R% e1 E3 }! `; T' e1 G
//使用方法名字执行方法 % p: X4 d9 o, O8 \' |* _2 [
var t1 = window.setTimeout(hello,1000);
# U* h6 n! H" u S% I
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ' Q; ?& K5 D* y, O1 u
window.clearTimeout(t1);//去掉定时器 ' ?# L8 _1 i8 g5 A8 t: _$ S2 y2 g( b
</script>

复制代码

2，重复执行的定时器

<script> ( {7 j$ r7 x* X& V) \6 b( C
function hello(){
) P+ V# q5 k( f/ |
alert("hello"); 8 C9 `+ }0 l$ A, ^
} 5 [! S' q i0 Y7 ^. }7 w- `" P& P
//重复执行某个方法
4 x& A7 G7 |* a3 Z7 I3 w
var t1 = window.setInterval(hello,1000); + {( M8 d. A& ], I3 D
var t2 = window.setInterval("hello()",3000); 3 Q2 Y% Z z# u( m
//去掉定时器的方法
f) l, R0 ^0 @5 O, V- {9 i& F
window.clearInterval(t1); , W0 F6 t& A* y3 `8 J
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
) ^1 x8 @; x! q. f2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成2 w/ u3 O& b8 y, [
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。. C5 d5 B. u5 c" Y, L6 W
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
( F1 D% l j. r0 m; k$ P% t比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，, t @. d5 q$ X9 I- x* d" w
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。8 ]# O( S2 e+ _- S$ q* x' y$ o
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。" [) r' u; `3 y4 w( o
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
( x4 X" J6 h7 U+ m0 VsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象. o6 m. Y* U; `/ g
clearInterval(对象) 清除已设置的setInterval对象

略举两例。8 `* _5 [9 p* d' P7 u3 @1 U0 r# i8 b
例1.表单触发或加载时，逐字输出字符串

<html>
. ]( ]: {# `8 y; A) u8 V
<head>
7 f5 m1 O- f# z+ l. U
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ i2 x P" R; p; I! c# `/ n
<title>无标题文档</title>9 U9 b; A& j) g$ ~' o$ g
<script language="JavaScript" type="text/javascript">4 Q4 Z5 c9 ?1 @
var str = "这个是测试用的范例文字";
4 b' T' a/ P* x/ D
var seq = 0;) f6 U3 \8 a0 O' Z
var second=1000; //间隔时间1秒钟! f# r* ]' v* N4 ~
function scroll() {
, G0 U( F$ M. E
msg = str.substring(0, seq+1);8 ?# H: u9 ?0 y( ?6 g
document.getElementByIdx_x_x('word').innerHTML = msg;; O. \5 \$ _2 w2 r- k
seq++;
/ {% I+ f- ? z4 W: i+ y3 x1 ]. ~
if (seq >= str.length) seq = 0;8 K; R0 B: B I+ b: B1 M
}
5 ]) v" \$ ]0 Q$ b) T6 S
</script>* g1 ?1 G+ Y' P( W& J5 x
</head>
# v0 {9 [8 x; |8 ~' h9 V
<body onload="setInterval('scroll()',second)">3 ` s) k! n0 Y# X6 H6 U
<div id="word"></div><br/><br/>
: j8 Q$ ^2 C1 @5 T. }# ~* I! Y+ u
</body>2 P# {2 L% u; d2 W y
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 T7 }1 r- d+ C/ M: S
<html xmlns="http://www.w3.org/1999/xhtml">
5 `- X# y j' J
<head>
" e' `" R) }8 l) u P
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />1 o3 B% M5 s& B) x0 ]
<title>无标题文档</title>
E" g+ {3 [5 \9 ~' }
<script language="JavaScript" type="text/javascript"> L2 N- d7 d( e! B: o$ R* I
var second=5000; //间隔时间5秒钟
9 e( }. m2 ?% c( A0 z" M% _' }
var c=0;
$ \8 a7 r1 _/ |* y% |0 G
function scroll() {! x6 e \; e, w9 @# U# [) e( \
c++;
9 N& I A% J) W
if ("b" == document.activeElement.id) {5 J. V; v( K: V8 y, L; R
var str="定时检查第<b> "+c+" </b>次<br/>";, `& A, x' s" N! }9 G4 x( M
if(document.getElementByIdx_x_x('b').value!=""){
/ V; o; B: I& Y, [) |0 B0 h
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
( c t. @0 k ?8 s: O) g& F
}
7 k& c, \+ V3 G, T: g" f" U
document.getElementByIdx_x_x('word').innerHTML = str;
6 E# I9 e2 f8 ]0 b8 h( H! g) y4 K/ Q
}1 P0 b# G: |' m, q1 ?) B4 K
}
7 ?$ k. m" y4 v, H- `" S
</script>
2 P: Y) s& d2 K8 G: P; _" x
</head>
# J7 r4 X5 e1 k5 h
<body>
* _ g# l- j! _" n( C
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
1 G/ @. w2 ~ g7 I9 {2 Z7 G
<div id="word"></div><br/><br/>
$ Z- V' b( E+ L6 L% u
</body>4 c7 Q" V6 {5 g, H5 S, J6 M) L
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">7 Y5 Q! e. R' F T* }
<head>
. U; `, i) _9 l" L1 P- b# N
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ b4 ]' Z- }7 b, d+ }2 @
<script language="javascript">
! ^0 J: t6 s2 u
function count() {
9 X9 b8 E8 d2 Z. H* U* B
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";4 B6 s' X3 V/ T7 E6 A0 A" a0 d
setTimeout("alert('十秒钟到！')",10000)2 k, E5 w8 V9 q2 z. ~+ M4 s9 G. P4 h7 z
}
4 t. f& d4 j5 ?7 p
</script>
3 E7 y8 y" [% I
<body>
_* ] O+ Z' z0 R4 e
<div id="m"></div>% B- Y) R k( f8 {
<input TYPE="button" value=" 计时开始" onclick="count()">
: ?0 l1 D* v6 m
</body>( G9 y" g2 _! [2 n' m
</html>

复制代码

例4:倒计时定时跳转

<html>
; q; V6 K" i9 k; m
<head>0 n5 `: H H s* {* J( f
<base href="<%=basePath%>">- h& d; W% J/ U+ @4 H
<title>My JSP 'ds04.jsp' starting page</title>
% {1 k- [7 S# b" u0 G
<span id="tiao">3</span>1 x( A- V# l p% j" ?" f
<a href="javascript:countDown"> </a>秒后自动跳转……
* S+ z7 }2 i: }# i
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
! p. J/ s" T8 }5 J
& s( M- }/ z) X3 V7 Y" U+ @" V, a
<script language="javascript" type="">' y1 ~* w, J+ I9 M
function countDown(secs){9 \: _6 c- r5 [+ w$ ]1 c; a7 z8 \
tiao.innerText=secs;
7 \0 G7 h$ Y R, m7 d0 D9 F
if(--secs>0)
, H7 G; Q% j$ Y' ?1 u, [9 r
setTimeout("countDown("+secs+")",1000);, x( \$ I: z/ M7 k2 u0 w( s5 l
}3 J. M) [0 @5 r
countDown(3);- ~. {: n2 v$ _* N0 C, u8 g0 Y+ d
</script>: Q$ i: H; h+ Y) z
P9 `3 e! i/ y* ~/ {9 @1 {
</head>

复制代码

例6:

<head>
% f+ l, y+ h4 w8 \
<meta http-equiv="refresh" content="2;url='b.html'"> # q z7 E- Z. [1 D, ~+ y3 j
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
3 _: F5 @# C. c4 w$ _- B
setTimeout("window.location.href='b.html'", 2000);/ W \- G# {3 _
//下面两个都可以用9 M# |8 s3 a F! Y8 t& l
//setTimeout("javascript:location.href='b.html'", 2000);
3 E/ e8 J! q6 U0 ]5 I
//setTimeout("window.location='b.html'", 2000);
1 L5 S% i4 }, N" I# P% q( O# w% L. V
</script>

复制代码

例8:

<span id="totalSecond">2</span>
& x6 `* @* N4 E5 R W8 {& d2 X
<script language="javascript" type="text/javascript">
4 @ T; m/ g5 N
var second = document.getElementByIdx_x('totalSecond').innerHTML;
7 o; a9 D' G5 a0 V
if(isNaN(second)){
' I* |3 n9 R- b2 V. I
//……不是数字的处理方法
4 |+ ]) c, P. `
}else{
; e2 D# _' I, W7 Z' b6 c f
setInterval(function(){; y# ?% Y. j" [5 X# V
document.getElementByIdx_x('totalSecond').innerHTML = --second;
6 F! y( ?' E1 k' |
if (second <= 0) {
5 Q2 r* r6 O- L- g0 k7 Y
window.location = 'b.html';
7 Z" O9 {4 p4 ?3 h
}( o2 ?& g3 K: j- ?- _# q% p; N
}, 1000);( r `; n4 c8 n L2 M
} @. H9 z5 j- r( B/ u
</script>

复制代码

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

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