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

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

1，只执行一次的定时器

<script>
9 F U: d# _5 _
//定时器异步运行
8 Z/ B6 ` z( E$ {* T, G* ~
function hello(){ ! Y% K& U, V4 o, o! Y$ y
alert("hello");
# b9 {: y4 l2 S- A: j
} ! \/ z* w* T# s1 @3 P/ Y
//使用方法名字执行方法
. ~( K; m% K4 l7 [+ i2 L
var t1 = window.setTimeout(hello,1000);
$ q! A# j( _8 | `0 ~# ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
0 z: p9 V9 D3 P$ a7 p2 T; j
window.clearTimeout(t1);//去掉定时器
; @; f% `- I% }/ t
</script>

复制代码

2，重复执行的定时器

<script>
, T. S$ ]* ^7 W. c0 F
function hello(){
( v6 j$ O; ]. z) L6 A) P
alert("hello"); 9 d0 b" _* I7 t" s
} # ^* n$ g3 Q1 A2 p: L
//重复执行某个方法
& N7 i7 D# C5 C# L: _) m
var t1 = window.setInterval(hello,1000);
9 R8 }3 g1 ]9 p7 F$ o8 {
var t2 = window.setInterval("hello()",3000); 7 _+ `# x& A& K- p
//去掉定时器的方法
+ y# v; J) }5 o* _% ?
window.clearInterval(t1);
; ^& T# F7 W; G X1 K
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);6 o$ U8 F3 i( J, |
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成0 ]& O7 O9 o+ U: ]" y% q
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。/ y/ L9 j9 M8 L# @
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
! S' e2 Q* q7 A+ q. |比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，' R/ h0 \- Q; u0 |) E0 }
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。. z9 T( e& Z* v
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。6 D$ i L0 I# ^9 H4 u: @
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
\/ O% } k" p, X# P# N' X1 y/ CsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
8 n( R0 r s/ ]4 S# B; tclearInterval(对象) 清除已设置的setInterval对象

略举两例。0 e0 G- E4 F t5 a0 f
例1.表单触发或加载时，逐字输出字符串

<html>% U4 c0 J' V f; c- z; V; n7 \
<head>1 [( `5 [! s' ?$ l9 U; p
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />; w( k; U2 Q3 f' U7 R
<title>无标题文档</title>
% `' w7 p7 v' z$ H8 ?0 j0 y
<script language="JavaScript" type="text/javascript">
' Y, K1 Y6 a4 e' t( ]4 g0 L+ {
var str = "这个是测试用的范例文字";. r6 ^: Z+ x4 L% Q
var seq = 0;
/ ^* I5 Y: ?' v7 B3 r0 j2 ]5 G4 T
var second=1000; //间隔时间1秒钟
4 O+ N6 ?9 z l* \( }/ m8 n
function scroll() {
- s3 h& ^9 z$ K$ ?! r5 g+ K, P
msg = str.substring(0, seq+1);
$ g/ \$ `# K$ h3 T
document.getElementByIdx_x_x('word').innerHTML = msg;! Y* y# f) U# h" J
seq++;
* v# T" D/ j+ P% e; _7 p- k2 e
if (seq >= str.length) seq = 0;( Y* X# _3 O/ o- P8 Y1 k# R
}& G) D( ^! g1 D6 b. R1 V4 k
</script>1 t, G" Q- h# q! ]8 s$ @
</head>
}1 J" T- x: J- ]6 i/ [: D
<body onload="setInterval('scroll()',second)">1 E$ l; ]8 Y7 Y) C* @3 G* O
<div id="word"></div><br/><br/>) D% G. G- H! i+ N7 Z$ s- z
</body>/ b3 A i7 x# j4 X$ [% x
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* A) T6 ~' C% `& b
<html xmlns="http://www.w3.org/1999/xhtml">
# r& d; J% z! I/ X8 G
<head>
* }8 g+ B7 r& l' [" ^1 y- k6 T
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />! p9 W0 a% e2 z8 X( ]$ i8 \
<title>无标题文档</title>
) K* |/ ^, e6 [/ h4 ?8 W6 y
<script language="JavaScript" type="text/javascript">
1 E9 L$ S. y" \ U' q. {
var second=5000; //间隔时间5秒钟
1 f, g8 F0 Y- |) U# p. D
var c=0;
, _* _8 K3 }% X3 v0 Q9 M
function scroll() {+ C1 Q5 o" {' M3 D
c++;
# @& m0 w! L1 z0 R2 \5 n
if ("b" == document.activeElement.id) {
) U! V. U) c* @. p: ?- o0 b
var str="定时检查第<b> "+c+" </b>次<br/>";8 }$ U! y+ S1 j; O3 i& f
if(document.getElementByIdx_x_x('b').value!=""){
) M Q/ `2 A m' `
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
4 f8 }! x& h: g# r
}
/ l' O: l7 T3 w8 {: l' ]
document.getElementByIdx_x_x('word').innerHTML = str;5 ?8 }; l8 [' E* v4 i4 x
}4 M% h$ b0 z1 _0 Y1 S9 x
}( ^. c8 U- {5 A( r
</script>
& |( r; G+ |9 W9 l
</head>! j* C8 z) s+ z A- d+ [
<body>5 b& p% P9 U. O2 s, f
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
' B- h7 A d1 J9 K( K+ N& M
<div id="word"></div><br/><br/>
$ {5 n, P& t4 P2 C, O% J3 j: L7 P- C
</body>% K/ h3 h6 w" B- w' `( ~/ Q
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
5 G8 h' m& n8 h% r* G0 U, B
<head>
. w( U9 H5 Q+ X
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) N \: x% x6 D" C; b* E
<script language="javascript">. J7 `; c3 k3 U- m- K- I& Z0 F
function count() {
; D V7 d C7 h. Z& U' X
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";: [6 F0 D; ?6 ~; e
setTimeout("alert('十秒钟到！')",10000)& s% s+ p" |/ J( M5 O
}
2 |1 T8 b0 {5 w# T; T Q
</script>
) m- s' w5 D* s3 e$ f
<body>3 B, r# L) A/ o* ?
<div id="m"></div>' U$ p* G" U w% {
<input TYPE="button" value=" 计时开始" onclick="count()">+ N( N2 e+ Z$ a) M6 p- A, s3 a
</body>3 H' C# u8 _ e- r: l
</html>

复制代码

例4:倒计时定时跳转

<html>; [: B/ {5 ]0 k9 [
<head>
) A: ]$ n8 A9 }# R3 z
<base href="<%=basePath%>">
8 `! D+ Y, u1 A( F! h& L
<title>My JSP 'ds04.jsp' starting page</title>; y- ^/ Z3 N- U7 u0 p# T0 }- N
<span id="tiao">3</span>( v5 |* a$ x- G
<a href="javascript:countDown"> </a>秒后自动跳转……9 d u) @, ~ L( h _
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>0 \$ Z7 V" e% K( j+ X1 O
/ d6 d0 ?# K) G: c% |/ ~
<script language="javascript" type="">: D9 L D- Z5 [
function countDown(secs){) S0 _5 _( w' \7 N! R8 {& x! W% N
tiao.innerText=secs;" R, _; t6 S' K
if(--secs>0)
$ {9 |/ P2 Q4 y, v) j; @( s
setTimeout("countDown("+secs+")",1000);
8 b) n& S7 j" Q7 H: m% m) W1 h
}
# ^& l/ F$ }5 x# e
countDown(3);) V% M9 B* B$ {
</script>
1 I( ^& ? d1 a W! e+ k Z
: P7 @& m$ R+ J, g5 R# _
</head>

复制代码

例6:

<head> 4 J0 s8 L+ L6 I: {2 ^
<meta http-equiv="refresh" content="2;url='b.html'">
# O; K5 h3 J2 M; S: d; L
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
5 @+ t' ^% c' j' V3 k- ]8 a, h
setTimeout("window.location.href='b.html'", 2000);$ k/ A* B0 x( P7 a0 `* @4 d
//下面两个都可以用+ e8 }$ g% x6 }, e) ^4 q$ u- s
//setTimeout("javascript:location.href='b.html'", 2000);
9 q8 Y: p, E3 q
//setTimeout("window.location='b.html'", 2000);. z1 q* c4 U5 n
</script>

复制代码

例8:

<span id="totalSecond">2</span>
! f8 o0 |7 s+ l! v" T9 x- [
<script language="javascript" type="text/javascript">
4 a" }7 a* k# S0 g" G* l% ~
var second = document.getElementByIdx_x('totalSecond').innerHTML;
7 R: c5 I2 m h0 {: b# k4 {% E
if(isNaN(second)){
( \: h4 S0 Z" r8 F& c T# Q: ^& P
//……不是数字的处理方法/ l* ?, Q% |6 X
}else{. o3 p+ H8 A4 [3 }# k
setInterval(function(){
$ Q7 {1 C" e4 i
document.getElementByIdx_x('totalSecond').innerHTML = --second;
/ h7 r& [, O8 n% M1 x% ]0 M
if (second <= 0) {
7 O2 G* G8 k# g9 w7 L$ c' b
window.location = 'b.html';
8 m. j Q% ^! @9 v6 a" ~
}& B! G0 F; Y" X- b% }8 Z1 _2 ^# |, Y
}, 1000);+ S! m4 u8 F& `, K, s* i' g
}
, K4 W, m) x m/ N. [
</script>

复制代码

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

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