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

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

1，只执行一次的定时器

<script> : S. {6 }+ ^8 X
//定时器异步运行 / Y7 s* d6 T W* j) f8 B
function hello(){
* N3 H+ b0 E: N: r- ~& q6 j
alert("hello"); ; o m: h* r; D' p f* C; U
} ( W0 ~2 q2 o7 K7 U0 ^
//使用方法名字执行方法
/ i" h3 q/ R) j
var t1 = window.setTimeout(hello,1000); 1 J# w% E5 v/ y) N. J
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ) S" h6 J$ Y, t* A0 e h" O
window.clearTimeout(t1);//去掉定时器
) r5 a2 B( `, p0 o2 Q3 M
</script>

复制代码

2，重复执行的定时器

<script>
u( e( o5 x/ h2 a' s0 E
function hello(){
8 w1 r, L( Y7 x, }7 P- [# @
alert("hello"); : Z" W' j& {) E% F! I; [
} ) S; _. c' m+ Q6 X+ {; F" c
//重复执行某个方法
. K6 } o' b1 |1 x- Y1 e& i
var t1 = window.setInterval(hello,1000); $ e9 z8 l* b2 B2 i4 M: `8 _
var t2 = window.setInterval("hello()",3000); ) d& s( ]* B+ u
//去掉定时器的方法
' Y) ^: D/ [, W4 O+ T( e+ X+ ^- H
window.clearInterval(t1);
, F5 A" q0 F( Q9 W# a! v4 m3 {
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);4 r) a7 B' S" x0 \" W3 ^5 Z5 H
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
: m6 u8 a1 V9 \' g1 ^“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。* n5 y o9 f6 ~3 u
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
0 }4 B7 d8 C) E0 j0 q6 `比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
) e# b6 s8 W. B1 e$ f则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。5 s) H2 Y2 \4 Q& U4 m: ]5 a- i
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
' Q# g: h, |( z% rsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.! e1 K( g+ u* o
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
& X! }% C& t8 x( lclearInterval(对象) 清除已设置的setInterval对象

略举两例。' W. |0 x5 o; J
例1.表单触发或加载时，逐字输出字符串

<html>8 i7 J5 b6 ?: B( ~( M% m4 K) O
<head>$ x* g* g, d* d, W9 O' x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+ z+ {( G3 ?" q
<title>无标题文档</title>' A( y! B% R3 y5 [( J/ }
<script language="JavaScript" type="text/javascript">
' w! V% y3 X( m4 m- j
var str = "这个是测试用的范例文字";9 A8 Y6 D+ d& I$ s
var seq = 0;- V2 T9 K: C) h- r
var second=1000; //间隔时间1秒钟. s7 o3 a: w: S0 P4 j$ e. \ o
function scroll() {* P8 P# T h- c* ]3 e( n5 G
msg = str.substring(0, seq+1);
0 j) j4 t* i( D
document.getElementByIdx_x_x('word').innerHTML = msg;, p& c) U7 e- A
seq++;
/ a3 _& e. H1 `" U" |# n
if (seq >= str.length) seq = 0;: Z! a4 `9 s# L1 a2 L" p
}
9 z4 K2 d* z Z" S, j
</script> k H$ d0 ?# T5 D, d) R
</head>8 e. w4 Y/ _9 ]+ U" U
<body onload="setInterval('scroll()',second)">
* `9 `2 M, d) y' q8 U$ p
<div id="word"></div><br/><br/>: [7 f' ^- A( J) a+ B7 c
</body>
: s) a7 Y k' N4 D, ~& G
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">+ p, Z+ o/ K. k% q+ m1 g( W
<html xmlns="http://www.w3.org/1999/xhtml">
0 b. D) o, c8 t3 U+ O& I
<head>
+ g K3 _) H7 r; Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
0 U4 ?; b5 D3 i' @
<title>无标题文档</title>
9 t9 d: ]3 P0 @. ^% N# @+ i
<script language="JavaScript" type="text/javascript">
1 t' k, I$ f" Q4 N5 V: O" o' A
var second=5000; //间隔时间5秒钟
% m+ i# d1 Z" I" |# w* f
var c=0;
( }3 A8 y+ l/ {5 k3 M: \
function scroll() {
8 a8 R/ @( i# i! |! Z: N! \
c++;3 y' B; L" A& Z# n) ]
if ("b" == document.activeElement.id) {
8 V& E. z3 E- T9 [* m3 x3 ^
var str="定时检查第<b> "+c+" </b>次<br/>";/ `0 ]7 B5 g2 o, K9 j4 i9 s; e3 h
if(document.getElementByIdx_x_x('b').value!=""){6 a6 a) I$ [3 `9 s- Q% U
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
; ^+ ~% \. p3 i' g3 [% V0 [9 r
}
% q5 f. B1 @% O+ ]: k
document.getElementByIdx_x_x('word').innerHTML = str;6 W% d7 q3 F1 O- a: {5 C
}
% i) e5 X# x; r. H# y
}
@" l$ G# p- g/ P. ^/ X: J; W
</script>$ n, h) x* R' A. ?2 ], p
</head>: ^3 u; _2 M* D) b
<body>! _9 X' D7 K) k" c8 Y
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
8 S3 g2 o; z/ B! B
<div id="word"></div><br/><br/>
8 `2 V% W3 t7 n
</body>" [. ]+ B& \- R/ Y1 d
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
& g9 u8 [/ Q) V! a5 a- r0 z# z3 Q
<head>+ S/ M4 V: S7 i9 ]% i
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 [& _" E( |/ Y) h( _+ C
<script language="javascript"># l# w& G, j8 X5 K& ]
function count() {8 Y1 l* r! A2 d
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
[7 _; r y" z& p7 V( Z
setTimeout("alert('十秒钟到！')",10000)$ U, t7 m* y5 g2 l
}
3 U% t7 p$ O( _
</script>
. F7 J* h% Z1 E
<body>
3 f5 g$ d9 L0 `" `
<div id="m"></div>, P+ i0 X2 N/ N! ^1 N
<input TYPE="button" value=" 计时开始" onclick="count()">
' C5 V! E7 O {- B
</body>
& `; ]2 ?+ |" } t7 {" W. F, O
</html>

复制代码

例4:倒计时定时跳转

<html>8 }& T9 y1 e: a7 z0 G5 [7 j
<head>- a0 t# L" _' T
<base href="<%=basePath%>">- P' ~1 o" g! T0 n$ n( V. _# a
<title>My JSP 'ds04.jsp' starting page</title>
& g3 w/ B g* W# ^3 I
<span id="tiao">3</span>* f( `+ n& v( f9 e( ~0 F+ n
<a href="javascript:countDown"> </a>秒后自动跳转……5 {- u! ~* m: Z" b1 _
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ O1 ^- v) l2 L M3 d
' }% x4 N% W: _- T- g8 |) n) s' b0 ]
<script language="javascript" type="">( y% q$ I3 d7 J3 U$ k4 l" x
function countDown(secs){
+ ?* L: A$ W$ b2 S; C( m
tiao.innerText=secs;
0 M8 Z0 P8 N# o
if(--secs>0)
& n2 I' |4 i: f8 d
setTimeout("countDown("+secs+")",1000);& S" b2 r2 j, M& p+ l0 b
}; S1 V2 O# J( E# I) g8 N
countDown(3);
% n& A3 T' W8 W+ e
</script>. J* Z0 u5 P6 k# I' |7 O, M: |$ }7 Z
6 P- k6 Y A' }' @: g
</head>

复制代码

例6:

<head>
( x% o. w, g0 V
<meta http-equiv="refresh" content="2;url='b.html'">
, ^* `( R$ f8 D) C+ L
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">) H- h/ }& B/ z0 E0 f
setTimeout("window.location.href='b.html'", 2000);5 l2 N, t0 F3 E0 Y' ?" s4 y
//下面两个都可以用
" k6 d3 p4 O4 W3 N1 U) h* b
//setTimeout("javascript:location.href='b.html'", 2000);+ ^4 X8 R5 f( U) V7 u5 j$ p
//setTimeout("window.location='b.html'", 2000);3 J. g4 g2 v4 _( y7 P& r; ~7 B% O
</script>

复制代码

例8:

<span id="totalSecond">2</span>
& u4 \$ s; m. K$ O3 T$ O
<script language="javascript" type="text/javascript">6 ]# l! F) l5 f: Q# j3 W: }
var second = document.getElementByIdx_x('totalSecond').innerHTML;3 x6 J1 S. t9 r) W% a& w) e
if(isNaN(second)){& v t$ q7 n6 j, F
//……不是数字的处理方法2 P5 j; _2 H9 u. I" K6 h
}else{
6 p3 ^4 c! H/ ~( w
setInterval(function(){# N1 d3 H( p: r$ G g0 k$ Q
document.getElementByIdx_x('totalSecond').innerHTML = --second;' Q' j- `/ y% [; k$ s4 J/ G
if (second <= 0) {
1 F+ @; c0 D' D6 Q1 d; u) f; k
window.location = 'b.html';
# N, m' r/ P! o$ Y, t5 s9 t- k: T
}
1 `- ~" D1 W- v( H+ u2 M& s/ J$ p
}, 1000);
% ~- n/ h8 W, V+ g t( `
} & H# W5 R: a( [0 N
</script>

复制代码

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

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