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

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

1，只执行一次的定时器

<script> , C4 m; ~! _5 p& Z' `* [8 ]6 g
//定时器异步运行 4 q( W" [4 W9 w' s# q
function hello(){
+ M- i* \/ H4 m, O! M/ v! k
alert("hello");
+ B: S3 m" e$ N3 e/ Z/ Q3 _+ T
}
3 h* u' s. V1 L1 _$ N
//使用方法名字执行方法 & S) j) |3 o2 P, c+ j! N. i
var t1 = window.setTimeout(hello,1000);
+ }8 \" P1 d! i6 }) t9 ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 8 b* @! J/ `5 ]
window.clearTimeout(t1);//去掉定时器
; L9 N2 M& j% `( ~
</script>

复制代码

2，重复执行的定时器

<script> 6 t0 @; \# j- q5 r( I
function hello(){
. B; U7 c' `. S0 [% {
alert("hello"); * r1 b+ r& {+ l) c
}
8 E2 C! z8 d& N/ ]% h4 {4 D6 a
//重复执行某个方法 1 D2 y9 s8 {' C$ g/ W
var t1 = window.setInterval(hello,1000); % E0 U) `8 v* U" \; t) R& r
var t2 = window.setInterval("hello()",3000); 6 V. G# x# e6 P: q8 i
//去掉定时器的方法 - ~* q: o4 m/ T5 A8 f
window.clearInterval(t1); - ^0 j- S! o0 N
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
/ j% I' a, M4 h0 Z, X' F2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成; F5 N' f5 z3 E" S f0 t! G
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。2 L% r$ X2 A& T9 J* p
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
$ \9 d, a7 L" V+ g9 j比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
* u/ i& P" b8 o8 m* E9 k/ l A$ O则需要用到循环定时器“setInterval("function();",delaytime)” 。

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

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
. w) g) D6 [6 q1 N) b; N: |setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
1 k, @( g0 L- _setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象& z( f1 _9 \$ C
clearInterval(对象) 清除已设置的setInterval对象

略举两例。1 F, U& @4 E4 {3 B
例1.表单触发或加载时，逐字输出字符串

<html>
2 x) V; w( j5 S
<head>' R& w( ]$ c/ h# J8 I
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
' r9 E5 f5 ?$ j" x v
<title>无标题文档</title>, O* K, @; |6 B9 v& e
<script language="JavaScript" type="text/javascript"># k& u- j1 K3 v; v& t: D
var str = "这个是测试用的范例文字";! u0 e& U/ o8 |* T
var seq = 0;: c, E+ M& W" W
var second=1000; //间隔时间1秒钟4 Q0 X7 X2 X) }: G/ \/ S" p
function scroll() {
9 f- W% ]# ]1 S4 M( }, n
msg = str.substring(0, seq+1);3 e+ c! K' b' a2 K2 ?
document.getElementByIdx_x_x('word').innerHTML = msg;
) v6 `' |8 h( l5 s, c
seq++;5 ]* V5 A* c. D9 W) X! S
if (seq >= str.length) seq = 0;$ O! b+ v: m' s5 p4 I
} M* A) Q' H, V0 w/ b. L! C& T
</script>
9 P' S1 Y% p& ~, w0 ~" Q6 V
</head>+ C, Y( y: b, B
<body onload="setInterval('scroll()',second)">6 F( v' U# M5 V/ q( u6 S/ `
<div id="word"></div><br/><br/>8 P/ T0 ?( d8 p' d/ v
</body>
0 v, E# b8 R) N# x
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
& g2 b) q @, a: s5 o
<html xmlns="http://www.w3.org/1999/xhtml">
! j0 \+ G( D5 Y" [
<head>
% [' n7 P, N, B
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
& P* p# u. l3 S3 l; P
<title>无标题文档</title>
; Q8 [* x2 B/ T5 J8 k2 z1 N" b
<script language="JavaScript" type="text/javascript">
I X @6 E5 `, x7 m5 o
var second=5000; //间隔时间5秒钟
# o4 ]8 V- ]# N$ c/ n+ F! o
var c=0;5 J0 Q% U& i! P- W& s) X
function scroll() {# H/ U* q1 M9 j" r: |
c++;% \2 k% h. i; _3 p+ B
if ("b" == document.activeElement.id) {9 @7 u5 U" c7 t0 K2 A! K
var str="定时检查第<b> "+c+" </b>次<br/>";
* f4 Q( c" Q8 t" S1 k& m
if(document.getElementByIdx_x_x('b').value!=""){6 [3 D$ P5 D6 u. y" W
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";; d. n3 V7 M) r. P
}* w+ s- o/ r/ e0 u
document.getElementByIdx_x_x('word').innerHTML = str;
6 A% u; C/ ?. O7 W! }
}
( w1 R% m5 z$ W2 Y8 w
}
4 }! g+ V+ v4 ?
</script>4 q4 V0 A2 a f
</head>- l: [8 C6 k3 C4 U
<body>( Y1 i' r! G+ S+ o
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
5 I& O7 F8 O8 R4 ~
<div id="word"></div><br/><br/>: C! E5 G; V% S* S, E
</body>' X0 W2 N/ G( y. [
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
. i3 D! I; d0 l* Y! [
<head>6 M. b0 i' `* T4 H y, f
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* }6 b( n+ C7 x% M
<script language="javascript">; H0 _# @- L" |
function count() {
+ L' K+ ~ m" [# t9 u
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！"; e* a3 v8 [3 s# [- e1 e
setTimeout("alert('十秒钟到！')",10000)7 A0 N9 _& {; F0 S
}2 C! u/ a6 h: o4 p8 m8 C
</script>
0 W! e- m$ j( X
<body>0 G# @5 [8 A3 Z/ ]
<div id="m"></div>8 x8 j5 ~, j% y* {9 |8 m
<input TYPE="button" value=" 计时开始" onclick="count()">. ~% v( b/ \1 x1 K8 n2 ?7 x
</body>% O; C( l. j$ O: J6 A. L3 C$ b
</html>

复制代码

例4:倒计时定时跳转

<html>
2 K( w( s5 \- ^* p& M. m
<head>9 v- b8 h$ A* s; J8 \. b. }; ~
<base href="<%=basePath%>">& `% _. O+ P/ e C, P8 R
<title>My JSP 'ds04.jsp' starting page</title>
; V8 Q9 M4 d! u' ?
<span id="tiao">3</span>- K& V5 M: G6 A3 X
<a href="javascript:countDown"> </a>秒后自动跳转……
% d w9 x$ c+ H. N% R" H9 i* H' P
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
) N w& H8 Y3 D' N+ {; Z
6 ^3 g; O4 ?: y( C. y
<script language="javascript" type="">7 w9 H: ?1 Z" h9 }4 ~3 p8 |
function countDown(secs){
, V) X8 q& ]$ ^, T9 c) F
tiao.innerText=secs;/ \3 t2 b- c0 c7 U$ M) H9 X& I$ a
if(--secs>0)/ H+ u; C! B [/ V+ B6 A6 o0 E
setTimeout("countDown("+secs+")",1000);
t8 w* K2 D+ l" O2 v
}
* C: K- s& _5 G; S& g
countDown(3);2 W0 ^4 ]' ]# R& @5 o3 P+ b$ n
</script>
7 _4 M' l" D" T0 W2 w8 `% x- _
5 S) {- d, M2 @" {6 r5 y6 ^4 j: e$ S4 z
</head>

复制代码

例6:

<head> 4 P$ G4 V1 c/ ?" h
<meta http-equiv="refresh" content="2;url='b.html'"> 7 n. d: W7 u8 q# e h
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">7 M! u5 k6 Y0 J8 j- g
setTimeout("window.location.href='b.html'", 2000);
! E: W8 o) `# d
//下面两个都可以用
+ ^. W$ y0 t/ P' {0 b
//setTimeout("javascript:location.href='b.html'", 2000);
' `8 l; R$ A0 \5 w% b
//setTimeout("window.location='b.html'", 2000);: Y2 F. [4 n5 I
</script>

复制代码

例8:

<span id="totalSecond">2</span>2 g* q0 }! E" R! t/ G7 r
<script language="javascript" type="text/javascript">
3 e1 ?9 e7 n" m0 S" a
var second = document.getElementByIdx_x('totalSecond').innerHTML;
+ x4 t X/ g n# u% c( V1 W
if(isNaN(second)){7 d' ]; b0 @9 I* t# Y
//……不是数字的处理方法
0 Z1 R" J" q; B4 ?1 p0 o* h) h
}else{3 J+ V4 G0 s( {- `
setInterval(function(){
5 R; n7 L0 B/ s, ?
document.getElementByIdx_x('totalSecond').innerHTML = --second;# C% K, _2 M2 ?8 u3 `( S0 ^9 l2 `
if (second <= 0) {
, g& q- y+ t8 ^
window.location = 'b.html';3 \7 U& T$ l. I( u4 j& q8 a; c
}/ C' C/ h7 U6 P) T
}, 1000);
8 {) R& e. {, k6 R; I9 m; o+ ^
}
* `7 L. ]! A' Z7 f# i
</script>

复制代码

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

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

浏览过的版块