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

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

1，只执行一次的定时器

<script> # E+ ~: b* U3 y- `7 q, h' F
//定时器异步运行
6 @8 E& d: J" d" n, \6 d
function hello(){
3 g' C8 U+ a4 R
alert("hello"); : h9 f t6 F7 G; S
}
6 a, u: f: g; ~3 Z- Z7 Q8 s
//使用方法名字执行方法
- p. }: \0 @/ M* @; Z% {3 b
var t1 = window.setTimeout(hello,1000);
0 k; O9 V9 g! J5 k
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
8 i; W) c0 J$ d8 C9 T1 |
window.clearTimeout(t1);//去掉定时器
( e9 r4 U) Z% k5 z6 j
</script>

复制代码

2，重复执行的定时器

<script> 8 M/ h! X0 x. t, ]( e- |
function hello(){
, t# C8 V( |0 U' n4 |' ?: j
alert("hello");
8 R l8 ]5 D. j; B0 E& G7 H" n
}
- L! `; r* s7 k/ g2 F. s
//重复执行某个方法
- t: B2 a' F: Y# }0 X
var t1 = window.setInterval(hello,1000);
$ O" n( s0 S/ q4 Y
var t2 = window.setInterval("hello()",3000);
( a2 h+ y5 |. a- ?" D5 [+ K# A
//去掉定时器的方法
7 M# X+ y( P' }0 E) W5 ~0 P# t. ?6 M
window.clearInterval(t1);
) v0 N' E% J: x r& R
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
- @& }" d. N, r/ Z6 r) v9 ^0 Z2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
3 q: g$ P; x: g( Y6 @0 ?“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
& H5 O! m( f. c1 H/ b　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。) [0 `# \* c4 M
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，* W' X# p0 ]* w
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
- G+ \* R3 A! H1 A- t; [# a8 V比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。' ~9 g" M) k Y. H
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.; o/ r/ ?& Y7 A! f# N2 `6 \
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象% A$ `; c! {# ~+ A0 s( k
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
7 Z* b& \: o, ?* H! G" M% d例1.表单触发或加载时，逐字输出字符串

<html>
3 y, L' {' x) w1 P3 G% z
<head> x8 D I+ N$ H9 E/ J4 i, M. B# s) s
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
% d/ |! l( e6 e* y
<title>无标题文档</title>
7 X) l- G9 k8 d" j' f# `% S
<script language="JavaScript" type="text/javascript">
# T' e5 Q- B# N; ?- s! V( Z3 \
var str = "这个是测试用的范例文字";& |% x+ S5 S ?2 b7 }9 M' z1 U
var seq = 0;
$ _& L% d* `0 n" a7 s' _
var second=1000; //间隔时间1秒钟) e4 T/ i& T3 F. n8 f* [' O
function scroll() {8 X7 n, c- c1 d) Q) j
msg = str.substring(0, seq+1);$ H7 t- U; h9 W% b1 f
document.getElementByIdx_x_x('word').innerHTML = msg;5 a* b7 ^# O. l6 I( H
seq++;) V5 I; D' c7 h
if (seq >= str.length) seq = 0;
, c2 H! Q0 h# S, ] z
}
" G1 [4 u% p( u2 l2 c
</script>
7 [9 n, M9 k! d8 Y
</head>0 n' a& E& E+ M% _& {! q: y
<body onload="setInterval('scroll()',second)">
* D9 W8 O- n$ ?! v! t
<div id="word"></div><br/><br/>) p* i. |( K6 e0 H2 P( O
</body>8 O% b0 c4 A: P& l
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
" \! `& V' i8 j
<html xmlns="http://www.w3.org/1999/xhtml">
, O. p: \/ X) d& D$ x% H+ m
<head>
4 J: E4 C4 f+ M" M8 Y! ^
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 w) `5 y( b* ?+ |' p! p1 D* z) ^
<title>无标题文档</title>7 S J0 F& W$ u
<script language="JavaScript" type="text/javascript">
( @5 d1 ]& ]1 y
var second=5000; //间隔时间5秒钟. p* A. z6 G% z, h& l) R5 ^
var c=0;
1 M- Z4 m; Z; }. e5 Z3 V
function scroll() {8 T7 a$ U. ^- K0 ]& H5 x
c++;
) r( n& _% s2 e
if ("b" == document.activeElement.id) {
0 V2 j+ T. } @4 P! d! ?" z* y: ]
var str="定时检查第<b> "+c+" </b>次<br/>";
5 M& H# X7 j' \ g7 p% ~
if(document.getElementByIdx_x_x('b').value!=""){
: H: j6 C; B( B8 n: X6 w# O. Z
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";6 G4 n9 y% C9 v d$ U
}/ ]) f4 k, p) c$ j: S( t% E
document.getElementByIdx_x_x('word').innerHTML = str;
6 o, I( y0 S u
}
- P* M2 P5 E* m9 g: @
}* P* W" e) Y, i8 D% [* {5 w
</script>% F, K8 P( t/ l) U
</head>! |& O: a7 D8 @2 J) i
<body>
9 `4 g; G1 h! V/ P5 P* s1 G
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
# @; X. F6 e" l8 u" `3 ?3 B% t
<div id="word"></div><br/><br/>5 W) M% f: ?0 y0 e% k
</body>- t- Q" Y5 j+ n1 j, k
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
2 l7 L: W& r! Q: m
<head>
& }4 J& R" s' K% `+ b2 m# j7 o6 S
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 t0 q$ E' e/ O @1 U. |
<script language="javascript">
( ~# F' h* Z" F4 k2 w" y: f6 `
function count() {+ U8 @2 a( Q) G0 x3 a
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";0 M: d v i1 G( k
setTimeout("alert('十秒钟到！')",10000)3 ?# e1 B3 B3 d9 I# L v2 y
}9 ?8 W8 C4 d3 ^) `
</script>
# @: ~$ J0 k ?5 u5 B9 z! J3 F
<body>
1 h' f7 k" g x, R
<div id="m"></div>" j$ w4 r. U% H+ b- F; `
<input TYPE="button" value=" 计时开始" onclick="count()">
; f& _2 A; H! _3 C
</body># z3 Q1 }- T i& W0 L' e" W
</html>

复制代码

例4:倒计时定时跳转

<html>
M0 {% O. q' m j6 Q, |
<head>
8 f! a+ f W/ n; X( }
<base href="<%=basePath%>">+ K- I& O% b) t6 E2 Q/ ^2 z" a' _
<title>My JSP 'ds04.jsp' starting page</title>4 U5 N/ `& A& S# f2 {
<span id="tiao">3</span># p6 V3 |+ Y4 W4 f
<a href="javascript:countDown"> </a>秒后自动跳转……5 ^% ~# ?2 j7 z
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
2 L) ^9 ]8 n% i6 R3 O3 w
9 o1 ^# `$ ?' y6 O5 b6 e" R" n* @; v" O2 J
<script language="javascript" type="">* n# b0 C4 d# J2 y$ |
function countDown(secs){
5 v8 P7 Y, ?' L
tiao.innerText=secs; K- j9 D7 V8 Q
if(--secs>0)
" _4 `( B3 c9 |8 ] ~+ a4 g
setTimeout("countDown("+secs+")",1000);5 ~+ W) y5 P- M
}3 S3 S! a' e2 m+ {5 a
countDown(3);
- c1 I8 ~" A; \
</script>
3 H4 t) l- [4 j/ f9 Z4 I
5 `5 i& H2 M$ z: T% A E
</head>

复制代码

例6:

<head> ( ^% T- M2 ]2 Q2 v6 e W
<meta http-equiv="refresh" content="2;url='b.html'"> ; l; b" w* T! i8 y& q, x
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">" W' |$ x& f# n# O
setTimeout("window.location.href='b.html'", 2000);2 S0 G# \4 x# N0 ~9 U7 W$ [
//下面两个都可以用
6 |- ~. T6 r: P( ?- m4 @
//setTimeout("javascript:location.href='b.html'", 2000);
# _5 F! [; A2 ^* y
//setTimeout("window.location='b.html'", 2000);! A/ P+ d6 B! D$ G
</script>

复制代码

例8:

<span id="totalSecond">2</span>
7 \. J, R' {0 Z; |! r4 p
<script language="javascript" type="text/javascript">) V* j5 V2 I B( n; G
var second = document.getElementByIdx_x('totalSecond').innerHTML;; K* X. r0 q X* h3 q" f1 }
if(isNaN(second)){% p" X/ _6 X) E0 K9 [
//……不是数字的处理方法
& W) B' Y7 S8 _3 R E# g9 C* W
}else{
* Z$ H5 n9 s4 Z
setInterval(function(){. T; F3 h: }9 m& q0 B
document.getElementByIdx_x('totalSecond').innerHTML = --second;
/ n; x, \8 @: Y" m- H. |
if (second <= 0) {
0 o) g- F0 E' u( i
window.location = 'b.html';
# [. P' E6 F1 l! R) H: p
}% U. y- H4 ? z9 S- |- \1 }
}, 1000);6 W0 V) @4 E. m6 E0 I, H/ o! \
} ' ]! [4 L4 R8 ]( h5 w; L A9 b* {+ V
</script>

复制代码

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

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

浏览过的版块