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

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

1，只执行一次的定时器

<script>
# v" P! V9 O2 C1 a) v6 k4 J
//定时器异步运行
: v X- Z q+ t2 [" B! u
function hello(){ 7 L% x1 ]* U9 m4 W# ]: _
alert("hello"); 8 i" D7 Q* q! k( D. j' X' S- N5 a
}
% |: z* [2 c9 \
//使用方法名字执行方法
* h; c/ H, e( }' Z
var t1 = window.setTimeout(hello,1000); . S$ h6 Z8 p j/ [; R n* n
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 . N6 }8 n8 W2 C. J8 V, V. ^( e& N
window.clearTimeout(t1);//去掉定时器
1 `2 M: u1 z$ b* Z$ J2 t, t
</script>

复制代码

2，重复执行的定时器

<script> . H0 O# V! C! H0 a$ s6 ?# D5 E
function hello(){
. I2 b8 O' I) Y+ b; m
alert("hello");
% e4 h8 B0 E; M4 K# a
} 6 u* x9 v5 Y( c$ j- B
//重复执行某个方法 2 Z6 s6 n9 R! C9 q- u- ^' r2 e
var t1 = window.setInterval(hello,1000);
, T5 C: Z! n$ T* l+ l, T
var t2 = window.setInterval("hello()",3000); ) A, u9 k: S, g1 ^/ W
//去掉定时器的方法 8 z* K, W; d) ^6 r8 l' Y) s
window.clearInterval(t1); 0 u e ]; G6 n4 ~1 S8 Q# x7 a& G
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
% M/ V3 t2 `2 V& n- z3 w. [: u+ Y2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
" Z. ]: P# d6 A; S“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
) ?0 X6 g# S/ k3 S6 l　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 L, G1 ^; u+ _/ Z5 u
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，9 j4 O1 {# h7 z" |& Z
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
- [4 f3 p) T8 n, `比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。1 p5 v0 \' r+ X* b
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.7 x) e* S j: `
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
# w) ]9 r4 w; ]9 F" v: iclearInterval(对象) 清除已设置的setInterval对象

略举两例。
9 C& b2 l9 N) \# `6 Y例1.表单触发或加载时，逐字输出字符串

<html>( m; z7 k- R* d. i3 {' @0 }2 e% v
<head>5 {0 h; p; H8 h/ y& x" @
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 H3 m/ R. t, ^$ r0 e$ f
<title>无标题文档</title>/ w( t( b+ y2 ? R
<script language="JavaScript" type="text/javascript">
1 D* L2 F7 }# P& }8 ]" M5 V
var str = "这个是测试用的范例文字";
' y9 a% b1 L5 R" s
var seq = 0;+ ]; @! f5 i- Y6 c
var second=1000; //间隔时间1秒钟9 X8 b3 z/ _& G8 `% P
function scroll() {3 l( O9 P% R' p) o: L/ Y# G
msg = str.substring(0, seq+1);4 p/ E, o$ o/ k& G4 R
document.getElementByIdx_x_x('word').innerHTML = msg; a! s5 u1 W. E2 M
seq++;
+ E# Q$ {% u1 `& E0 e! |5 p
if (seq >= str.length) seq = 0;/ t+ J `! v4 w% E) `& ^
}
2 \9 i! ?, l6 n0 ?% C' v2 T
</script>; g, S# Q8 l% \) G
</head>
; J* c: y7 _+ y+ H+ U5 ]6 _
<body onload="setInterval('scroll()',second)">! i9 G8 p& I7 K' ?% v8 z0 b
<div id="word"></div><br/><br/>4 s. E i5 |8 P
</body>% o2 i2 r! \; f! Y/ E
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ~3 R( p D7 B1 n
<html xmlns="http://www.w3.org/1999/xhtml">' a# h4 t5 Z+ Z; N0 K
<head>
" Z- v! d, h" t4 ?% ]5 o
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
/ c( g8 n c6 I4 F( y" g
<title>无标题文档</title>
: u' a7 u! X( W. i
<script language="JavaScript" type="text/javascript">" D/ S. ?. O( x$ S7 y N
var second=5000; //间隔时间5秒钟
) i, t+ W; A* G# r
var c=0;
: m0 w( S$ a6 r h, r. g# Q
function scroll() {
% F5 T) h- L0 ~0 U. t, a7 b6 D3 S
c++;
; ~ ^. e' g; @5 N
if ("b" == document.activeElement.id) {$ }( G! H1 W3 g2 p2 W
var str="定时检查第<b> "+c+" </b>次<br/>";
* Q+ u; i: I4 `# z7 e0 i
if(document.getElementByIdx_x_x('b').value!=""){
$ w; C* k6 t2 t
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
{0 H1 T" F) N, }3 a4 ~& ^
}) B9 l, u' X/ q! r! L5 |
document.getElementByIdx_x_x('word').innerHTML = str;* p. b* H N! I
}
9 s7 }7 W1 ^- O; ]" x- q. z) X) x
}' q+ x+ ?( N0 H0 R) k
</script>/ t7 P# w2 X' o4 p( s1 }/ o
</head>* E6 ]$ X2 E7 Q i
<body>" E( S1 P% F7 c2 Y
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>6 q7 ~4 K; U3 z& H: u# d
<div id="word"></div><br/><br/>6 u: n" ~1 ?7 _9 `8 M$ m6 L, ^
</body>
9 @7 x' o' ?0 L
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">) q9 V! q8 z1 P+ K8 M- {
<head>
! F: q1 e j9 k5 E0 o( w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 e8 n0 }# H* Z
<script language="javascript">
) I6 L8 I6 G! F- ~7 B
function count() {1 ?- \. O% f- ]! F% d) _9 I R# N- f
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";5 c% p8 V7 X! i4 s
setTimeout("alert('十秒钟到！')",10000)
" z, p T1 v* i) c, K
}
' k7 Q% N! X: _4 O$ d- ]+ J3 q% t
</script>
% S- }- w: w7 W+ t8 [0 s
<body>( B v& q9 F. U; }0 k% j: H
<div id="m"></div>
: _0 n: l, E! M" S1 X+ {7 A
<input TYPE="button" value=" 计时开始" onclick="count()">3 {- }- M; T4 `; @6 v6 d, m! a+ F
</body>
' E; p8 _: a/ l, [& m$ P u# u
</html>

复制代码

例4:倒计时定时跳转

<html>$ b: ~' s+ o# G$ J2 G7 f# a* Q% {
<head>
H4 W2 O5 O. Q0 ^
<base href="<%=basePath%>">1 Y7 k3 K9 O8 U& q! C( u$ u9 U
<title>My JSP 'ds04.jsp' starting page</title>
/ \! v6 z" W( W$ k$ z/ J/ f. ^
<span id="tiao">3</span>% K" J% C& |* \" L: K( V
<a href="javascript:countDown"> </a>秒后自动跳转……
4 g( p; |; |$ `3 [" F, F
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>- A1 R6 |$ H3 l. D" V$ G d! u+ N! @
5 G- K* U1 B) _* S- T$ B& P2 t
<script language="javascript" type="">% W/ k0 i; X: x5 S- c3 Q* Y7 V5 A
function countDown(secs){
s8 W; c$ P# G! ~" y
tiao.innerText=secs;/ W1 r8 U5 t+ `. O9 f2 W$ N
if(--secs>0)' M3 _7 u5 V) ]5 k4 W# ^
setTimeout("countDown("+secs+")",1000);2 G% i$ h* h" a, Z
}% h- \+ C; u- j( m
countDown(3);
0 s8 f5 s! s0 d, t
</script>
0 m; R) Z$ Q: x8 X, y8 Z
, l4 Q4 |9 n; y }: P
</head>

复制代码

例6:

<head>
, b$ v" p( `4 o0 u
<meta http-equiv="refresh" content="2;url='b.html'"> # I6 d! W, ^( m8 s' Q, ^
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">5 w- F9 s+ Q; U- Y- T% X+ L
setTimeout("window.location.href='b.html'", 2000);
} ^3 c8 ]3 e: F( y$ m5 u
//下面两个都可以用
9 t0 R5 d6 K) P7 u! ?: X
//setTimeout("javascript:location.href='b.html'", 2000);
. Z `# f' v4 X% a- J
//setTimeout("window.location='b.html'", 2000);( R; M: d+ N9 C% H; S" ]& ^4 b5 Y
</script>

复制代码

例8:

<span id="totalSecond">2</span>
; |# {0 a; J/ K% ?+ f
<script language="javascript" type="text/javascript">: v( _# B) W5 `( o# u1 m
var second = document.getElementByIdx_x('totalSecond').innerHTML;
( [' t* z5 F/ m- K: C) ]3 l
if(isNaN(second)){
6 y% f) I- o& \3 L
//……不是数字的处理方法2 v7 E0 u+ c5 U3 t
}else{1 C: q/ G! N, C3 J" _
setInterval(function(){$ J# v& ^; b/ j- z/ W- Z; i
document.getElementByIdx_x('totalSecond').innerHTML = --second;
2 Y( ]6 g+ t2 t
if (second <= 0) {7 F' A# q) @/ e/ J
window.location = 'b.html';
7 i2 ?9 Z, T% R" X/ b7 {
}6 d& p. x5 i! h( L( F4 v4 P
}, 1000);% X2 g, }. D7 S0 c7 G$ s9 }, _! z6 P
} # }) D& Q- a, E0 V' B1 X
</script>

复制代码

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

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

浏览过的版块