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

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

1，只执行一次的定时器

<script> ; h1 I. c0 k, ?2 c8 d, e
//定时器异步运行
( P4 Q0 d7 J, J) w& }' m; m, I' Y
function hello(){
) ^% Q! C. V5 O
alert("hello");
8 d9 U3 [" g1 [# }4 e
} " k5 q* R! }, Z6 M
//使用方法名字执行方法 . B0 _' r/ |5 X w X' j- E
var t1 = window.setTimeout(hello,1000); 5 `* e' t! m S! V0 w
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 / {$ U# a1 R8 P; m* p# V# I2 q
window.clearTimeout(t1);//去掉定时器
# S; q5 y% R) \$ e; |$ Y/ d
</script>

复制代码

2，重复执行的定时器

<script>
% H( p* X( z/ J& S
function hello(){
4 ]- J/ j& q* [: {
alert("hello"); : }5 `8 ~) w5 m- @( s6 i6 Y- w0 r
} " F1 n! Z! n) }
//重复执行某个方法
' |3 C9 y1 {* z1 Z
var t1 = window.setInterval(hello,1000); 8 |4 Z1 S# d1 M
var t2 = window.setInterval("hello()",3000);
. [4 x6 {7 n* B9 M3 o
//去掉定时器的方法
7 H7 q" H b' J( `7 x9 M: y' H
window.clearInterval(t1);
s$ Y. u# h% _/ K0 d/ I, O, A
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
8 ~: @* Y3 c7 v `( M2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成6 v- s( X2 q: y6 d* e
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
1 t5 b4 a6 r$ n& Y% I: D　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。! G) H7 b' O0 F! T$ U2 B+ z
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，( f5 y! T9 w/ {
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
; a C; {$ m7 i: T$ g5 w) q比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

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

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.. b6 o* n6 v% L) Y: M( y
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
6 g' K; v- M j0 JclearInterval(对象) 清除已设置的setInterval对象

略举两例。
) u% l8 b& y8 {: T- m8 A0 E例1.表单触发或加载时，逐字输出字符串

<html>
7 u6 y9 a: V' T3 N* Y3 S* ]
<head>
- g# n# B4 o# C" r* k
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />: L# ~! }* E7 [: |
<title>无标题文档</title>& v: M+ Q# T: w- I0 B8 {, M7 C
<script language="JavaScript" type="text/javascript">
1 V3 o$ v! d# k# A6 H. X4 X
var str = "这个是测试用的范例文字";8 a1 w. H# G8 K5 x8 d. A
var seq = 0;
2 N# y9 S; }% M5 q7 x. _! d' \
var second=1000; //间隔时间1秒钟
: m: N' r$ z- C
function scroll() {
; w' ^5 S1 N6 u y& r
msg = str.substring(0, seq+1);
! }( b% @! [( ]# {# C
document.getElementByIdx_x_x('word').innerHTML = msg;; W( A* s& n5 \8 z
seq++;
" B- U! ~, }2 m' a3 i1 E( P$ w
if (seq >= str.length) seq = 0;1 v- S( h& [ C9 |7 y' |( o
}1 L0 h7 i5 A3 \) I$ r
</script>
5 C" X! w8 @8 k1 Z
</head>* f; u- z1 _9 E/ u
<body onload="setInterval('scroll()',second)">' n: H4 x& _& q* y
<div id="word"></div><br/><br/>5 i6 l0 y+ I$ s5 p s0 o
</body>! T7 ]# j5 V' X2 t" K$ P7 R7 P5 j
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">! S$ ?4 L: z0 V7 v: ^1 ?! D
<html xmlns="http://www.w3.org/1999/xhtml">
4 C# O8 J0 Q- t# |2 g4 {
<head>
0 D$ i ~& C& H% \# {
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* M2 h" d3 H2 r- L! o
<title>无标题文档</title>
6 k+ i4 \0 c7 s# ^! |/ v
<script language="JavaScript" type="text/javascript">/ S: G7 v6 R i0 w0 _6 h4 O' H
var second=5000; //间隔时间5秒钟0 q, n; X( l! R8 K' Q3 M
var c=0;
; Y- C+ m- H7 Z/ W+ d
function scroll() {6 h& R6 u$ u, F9 U
c++;/ k# ]& a2 v6 M0 \4 {
if ("b" == document.activeElement.id) {
5 G7 @( u' Y- \9 }4 m
var str="定时检查第<b> "+c+" </b>次<br/>";% a. i v h3 C( t- H
if(document.getElementByIdx_x_x('b').value!=""){
; Z% G! q- }: m y0 p0 G5 ^
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";- R) Z$ x. \; q& b
}4 N% Z. n" e, B0 `; n8 X1 K
document.getElementByIdx_x_x('word').innerHTML = str;
# y% ^( B: M! U- k. U
}! [ K) S2 e! G% X
}
; C; i6 v- Q. `+ x" v3 {9 o/ T
</script>
5 X: S ` F! c+ ~' ~
</head>$ ~6 p' _, Z0 r
<body>
% B. ~0 @( e+ c" x4 X' {( l! h: _
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
7 ?" [5 D) `" l' ^$ n
<div id="word"></div><br/><br/>' A: B, T: b# l
</body>6 F, ]' n* o B4 u
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
- j" X2 |. G, n: `1 e0 E" u4 }8 L" \) i
<head>- y$ M) v6 R1 W$ m n$ X! _9 t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
. y# O: y; c( q6 |7 Q r
<script language="javascript">
( e: ?, x4 M3 J! }: d0 U
function count() {
, H2 ?! i: y- b: g, J0 z5 G
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";! }3 e5 u; Z& G9 t+ z
setTimeout("alert('十秒钟到！')",10000)
' s1 Q% p& y4 k+ D# o/ a
}2 z. {4 q7 r" g4 _7 d! K
</script>
. i/ o4 P* Z% Z Q: s, ]
<body>
/ O9 r* f+ X6 ~, z) M
<div id="m"></div>; Y" I2 C" h! ]
<input TYPE="button" value=" 计时开始" onclick="count()">, B& M, y8 q+ ?
</body>
0 \7 c# g. p( ~/ A# J4 D
</html>

复制代码

例4:倒计时定时跳转

<html>
6 i9 c2 A0 `/ {3 c$ Q/ M4 s% x) s
<head>6 n. C5 z% }7 T
<base href="<%=basePath%>">
3 R5 A2 r# z' ^, ]* ]# J: m1 k
<title>My JSP 'ds04.jsp' starting page</title>
# L# }* ^" s! u
<span id="tiao">3</span>! e' A# I; H0 u
<a href="javascript:countDown"> </a>秒后自动跳转……
1 x1 l1 I+ T3 k
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>; W7 E$ w- \7 \8 g5 G) C
0 V, ]$ }1 w9 E" c5 Y3 I$ x
<script language="javascript" type="">
3 g. p0 n8 J3 x6 I
function countDown(secs){
6 J% E7 t! K9 k% E1 N5 {2 |6 K
tiao.innerText=secs;, ?% i& w' O+ ^4 u2 S5 y6 X
if(--secs>0)
" y& i, x c1 D1 |
setTimeout("countDown("+secs+")",1000);; B# F/ m1 H2 R ~: r9 A
}% Y0 p! B( J% L+ m: c! F3 T
countDown(3);
# V0 }2 a2 J+ P
</script>
- b) K- f6 Q V$ M" F
A) T {& H# L- ^+ W- g
</head>

复制代码

例6:

<head>
0 D! x( Q( x! H5 N
<meta http-equiv="refresh" content="2;url='b.html'"> 3 |1 s: y8 ~2 }* z q9 N7 V* X/ ?
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">$ o# a8 I7 w( \( @- O
setTimeout("window.location.href='b.html'", 2000);
5 l G+ f" D* W4 F+ ]6 F
//下面两个都可以用
" z; T0 O6 f, y7 A
//setTimeout("javascript:location.href='b.html'", 2000);9 u. M$ A9 A; P2 ?# x& }5 @
//setTimeout("window.location='b.html'", 2000);# E' N2 w4 s3 w; T
</script>

复制代码

例8:

<span id="totalSecond">2</span>0 e& s6 y/ Z5 T! }( M
<script language="javascript" type="text/javascript">, f- H0 }) k. B+ p: q4 Y
var second = document.getElementByIdx_x('totalSecond').innerHTML;5 H% G9 h# m7 d. P; ]
if(isNaN(second)){
' k" a; Q! |. s- O
//……不是数字的处理方法- C) |4 ?# n3 d9 d2 ]+ E
}else{9 P" X# ?# H5 ~
setInterval(function(){; P2 J$ d. J9 P+ R
document.getElementByIdx_x('totalSecond').innerHTML = --second;, D/ `+ z4 U. j% W) l. d
if (second <= 0) {# P! g& \3 V1 c' m8 M
window.location = 'b.html';+ [6 g& E- J7 z6 \, d2 N
}
- t+ y3 \) w8 ]
}, 1000);
: T1 T: g6 `& I2 ^2 k+ J: T2 T
} ( l4 [, S* [+ g: `. z l1 } k f
</script>

复制代码

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

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