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

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

1，只执行一次的定时器

<script>
- z6 N) \2 e; H! A# g1 O8 r$ ]
//定时器异步运行
4 T/ f" |; N) r# d$ d. y/ ^( \, |
function hello(){
2 W4 j; @0 \- D% K% W3 d
alert("hello");
6 Y6 ^0 G' M% s% L
} + U/ P3 Z; U* z( [
//使用方法名字执行方法
7 e8 f7 i/ `) `" g$ a! I) o
var t1 = window.setTimeout(hello,1000); . F+ l+ S- Y' a. E% S4 _ c
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
3 U; j& _% n. B0 h$ X
window.clearTimeout(t1);//去掉定时器 0 j: T' h& o: z5 ^2 w8 ?
</script>

复制代码

2，重复执行的定时器

<script> - i9 [, n5 Q# P0 x3 }6 J' z
function hello(){
3 C' d2 |/ R+ W3 P
alert("hello"); / \4 F! U7 H; w6 J9 U' v6 R
} * i1 r* u$ B2 k8 m; X
//重复执行某个方法
: @+ f6 Z$ P* v
var t1 = window.setInterval(hello,1000); @. m K7 L: N. c1 l! Y+ J! t
var t2 = window.setInterval("hello()",3000); 1 }$ ~ c( y1 P. o2 [0 J3 e6 M
//去掉定时器的方法 $ ~' _, V8 e+ _- T
window.clearInterval(t1); ) J. x! d7 I9 q; d9 O9 N- p: m% X/ P
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
+ C) y' z; l7 q6 e/ j& \5 m# s! r2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
- X/ ^' o+ W+ X“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。8 [, L& ~9 s- M# A$ B
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。$ W( ~$ C, b4 P
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
; w9 v0 E' H0 N* `8 u则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。) R( m% J7 o0 d# B
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。2 o1 f7 ]& ?, i
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.# G0 R& N& }( I* ]& c
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
( K) \9 S6 O' H- V% gclearInterval(对象) 清除已设置的setInterval对象

略举两例。% C4 ?- d8 @7 t* `8 m* o
例1.表单触发或加载时，逐字输出字符串

<html># G( [: ]0 u6 V" u8 o/ C& F
<head>. t+ p9 ]; T0 d' b3 O2 a
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />2 D. D; }+ }) ?$ w3 L$ L$ \
<title>无标题文档</title>
; L& E& [4 i; W( K' M8 ^2 c, H
<script language="JavaScript" type="text/javascript">
) E/ I: ?8 t; j
var str = "这个是测试用的范例文字";" Q% t1 H5 @) ^
var seq = 0;
; |9 D: {' P" l; t2 A: u1 Y& S
var second=1000; //间隔时间1秒钟
) b2 }& M( I7 x- y* p* M4 q
function scroll() {% @6 v! ]( n% o4 a, w. N
msg = str.substring(0, seq+1);4 ^5 D) K# t7 y6 `- G/ g' D+ b
document.getElementByIdx_x_x('word').innerHTML = msg;" C. U: y: L. f5 w
seq++;3 Q6 d( m, f3 X) c) |( r' n
if (seq >= str.length) seq = 0;
8 a0 w9 J" L: m% j/ X
}+ [% _% l$ L. F8 h/ G, b" r
</script>" D9 ]( w3 F8 d6 [5 A* v
</head>$ ^4 B) o& c/ C3 H# b
<body onload="setInterval('scroll()',second)">
! r8 A5 ]/ a e) J& k, m( y8 f4 B
<div id="word"></div><br/><br/>
: H0 q( @; U+ c6 |+ j# f) b1 G5 m0 i
</body>2 K* l d: i2 m, J8 J
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 k# U3 `9 N$ ?8 K: ?0 R. c( B
<html xmlns="http://www.w3.org/1999/xhtml">
! a4 {, d- f" g: m* N; U% l# {5 R
<head>- I$ M7 g1 {9 K
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) X d8 c/ g8 ^5 T5 F
<title>无标题文档</title>
" [/ x/ e" q) A$ K& E/ j# ^) U" P/ i% O
<script language="JavaScript" type="text/javascript">
) ]( `: D ^+ l8 ]/ P6 G
var second=5000; //间隔时间5秒钟9 j) E5 |& Y$ B& d& l! k9 B
var c=0;' K: K$ Z' ^$ m3 l6 h& l( @
function scroll() {7 D9 F- u7 J ^" H3 e$ w! k$ {
c++;
0 h; q5 L9 G' A0 D6 e3 ~- @
if ("b" == document.activeElement.id) {
- ]& Y2 Q8 O! G4 B- T, l8 U% ~
var str="定时检查第<b> "+c+" </b>次<br/>";
+ I& H4 _ M4 `4 e4 L2 Q6 m
if(document.getElementByIdx_x_x('b').value!=""){
4 ?* e" f0 I( M7 E m |
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
/ M* J5 T4 k7 H
}: V3 ]; v, `6 }( m
document.getElementByIdx_x_x('word').innerHTML = str;
' k, F" n8 n2 ?; s; Q
}# C5 n$ x ]# l/ d# O
}
9 l9 u: J; M# w. v
</script>
7 l, ~6 Z& |: B' I; [
</head>
; |; p' M' d4 O7 d5 ^. @$ s
<body>
9 {0 K1 g) O* y/ {4 R: [$ z
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>0 ]2 j8 z! u3 l4 u& }# `- g9 M! v
<div id="word"></div><br/><br/>' ?8 m5 a! `( Z! Q7 C
</body> w" j& x) G: L# I$ v( z4 W
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">$ ^+ b O- e+ i
<head>
% h7 |3 P; ] B/ a, t# x" c
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, X) G! W; k+ D7 K) E
<script language="javascript">
# l6 d0 b' X5 v
function count() {
+ c% H3 V9 J1 s9 C
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' i: P0 Y( B: U ]
setTimeout("alert('十秒钟到！')",10000)
6 ?% W+ O6 g+ n5 B0 G, X- p, s" H
}
! C5 F5 q) r' n& {- E5 s8 b
</script>
$ v4 @; E- z/ M' x; A, r! Y
<body>3 G& Q* R6 ?2 M% K+ Y/ q
<div id="m"></div>
3 q2 S7 p7 J) t; ]. s7 w; A
<input TYPE="button" value=" 计时开始" onclick="count()">
7 Z5 }; c" a: A! b7 i
</body>
5 i4 _1 V! [5 j/ H9 E4 c$ M
</html>

复制代码

例4:倒计时定时跳转

<html>8 ^# d8 m) Z. d2 w0 u
<head>
2 T' }% g; \0 |) ?/ ]& ^
<base href="<%=basePath%>">
; f: {8 x+ w0 }
<title>My JSP 'ds04.jsp' starting page</title>" G h8 U- b2 J% D$ x' n$ q @) R5 D; m
<span id="tiao">3</span>
- b1 w; W, l. g1 C8 n
<a href="javascript:countDown"> </a>秒后自动跳转……3 A2 \4 Q) d6 N; O* ^/ u
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>- @, p! }) O/ H0 }2 |
" ^+ s9 P4 b& s5 [" ?
<script language="javascript" type="">, @3 ^) d% ~/ u' |/ W, E
function countDown(secs){: J7 r4 e* a5 H; t
tiao.innerText=secs;( X2 [1 U) E8 M7 g
if(--secs>0)* Q; M7 E* e$ _
setTimeout("countDown("+secs+")",1000);
# l+ f: s8 W2 ~7 {0 z7 `
}4 E2 r' b# h7 y% n) i0 h1 d% ]
countDown(3);
- l# p: ~, B5 d; v
</script>
: Q+ f5 R& C5 K; z% _
. p( j: k; r" L; c
</head>

复制代码

例6:

<head>
3 ?- `! S$ I& j5 _( Y1 ~' A$ d" }# }
<meta http-equiv="refresh" content="2;url='b.html'">
! @3 d5 b8 @- h, k. @
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">: K% y" j" _. W+ ?3 V' E2 w
setTimeout("window.location.href='b.html'", 2000);
% W: ~, Y v# i7 ?$ o
//下面两个都可以用% _) H ]# V2 F o+ A2 x' e
//setTimeout("javascript:location.href='b.html'", 2000);
- s9 |3 k0 i y( c4 X2 \4 T# }% K
//setTimeout("window.location='b.html'", 2000);
* D y) G( B' x* M, `
</script>

复制代码

例8:

<span id="totalSecond">2</span>4 ?7 z3 r& \5 R* r
<script language="javascript" type="text/javascript">
7 _8 }& U7 T3 \6 {
var second = document.getElementByIdx_x('totalSecond').innerHTML;' M# U T. Z6 P- d
if(isNaN(second)){
; H1 F. v7 Q1 z' `2 n/ d
//……不是数字的处理方法
# X' D4 ]2 _& v1 z9 m& Z' e
}else{, J7 _" c& R- g: j' u
setInterval(function(){7 x5 K: C% [9 K0 \5 r6 `# e
document.getElementByIdx_x('totalSecond').innerHTML = --second;, W' n+ U& l* }( I! `" o+ n
if (second <= 0) {
: j% D5 S5 d5 T) h7 J
window.location = 'b.html';- [6 y- D1 p2 {+ R7 e* \8 B h
}$ s# r6 @* I0 v0 i. s5 j& `4 ~
}, 1000);
7 s% p9 B0 I* s1 Z- J. l/ h2 l
} 7 g. q/ o# }7 ~- U/ r# Y+ t
</script>

复制代码

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

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

浏览过的版块