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

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

1，只执行一次的定时器

<script> , r# k5 {# `/ p" B
//定时器异步运行
( ?/ Y1 }4 u9 p8 D
function hello(){
$ j. [* k" d5 l7 ]
alert("hello");
+ n( _ D, s# ^- @
} ' Q5 E. s% m/ v& E% l4 G1 T* B. v
//使用方法名字执行方法
' y6 o9 V% U |3 S6 p l# N9 F
var t1 = window.setTimeout(hello,1000);
0 Q2 S$ V. M& g" Z4 s* [, J- |
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 7 }8 p ^! h, `1 t: w
window.clearTimeout(t1);//去掉定时器 " @1 H0 q: \( x$ C! z
</script>

复制代码

2，重复执行的定时器

<script>
- V6 ^0 I# S: A% e' w5 P
function hello(){
' l E- d& e9 \6 d1 }
alert("hello");
/ r ]# b" k, w: d- K
} 1 n. H3 N. a6 }. j* R5 I2 u$ D9 Z
//重复执行某个方法
) @7 f9 e+ }+ [( R5 M. u
var t1 = window.setInterval(hello,1000); 9 a; N0 r1 w( r6 @+ P& @6 O
var t2 = window.setInterval("hello()",3000); 8 T0 t- g/ ~! I- i9 h
//去掉定时器的方法 ) o& V, K: k. v) T9 w5 ~
window.clearInterval(t1);
5 O6 w7 K9 m2 o1 E, M- V
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
# P# e0 K2 u* D) ^& @: c2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成* e9 S* i' P y4 P
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
- n$ b1 D/ M6 y/ c0 P7 a　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。% Q/ l, a6 ]$ c e; A. G
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
# h( n" s' [7 r) _) ?6 D) k则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。* n$ g' O& e7 h, d
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。8 D7 Q6 L, e7 x9 U& Q
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式. {2 h A- N: ]
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
- D; e# Z# c" D; }4 r& kclearInterval(对象) 清除已设置的setInterval对象

略举两例。4 m1 B% O0 k* r5 t" T1 p% l
例1.表单触发或加载时，逐字输出字符串

<html>
8 b A! Z7 u* i% \& p% ^1 G
<head>
, |( |( b2 N/ x% G: S
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 I; S4 ]. }5 P5 T# B! w' e* Z1 U0 z
<title>无标题文档</title>
* M r5 N9 j7 j H
<script language="JavaScript" type="text/javascript">0 K# i+ I0 {2 _$ J
var str = "这个是测试用的范例文字";
5 t, h7 v: Y/ a9 {2 }/ Y
var seq = 0;* \6 M: P1 K g! P/ F& i3 A
var second=1000; //间隔时间1秒钟
' w$ f; J( Z8 B4 }, |% \
function scroll() {) g# \9 T, z1 w
msg = str.substring(0, seq+1);
$ `" g* k% u7 D, ^
document.getElementByIdx_x_x('word').innerHTML = msg;/ @6 J7 J0 Q+ H- J" B( u; l
seq++;- U1 ^6 m2 u, R7 f) X$ Y
if (seq >= str.length) seq = 0;
1 d0 E( ~9 x( U, }' _
}6 e/ E* z( G# O
</script>
0 g; g) H' Z! W$ @* {
</head>
" y! U8 u* f% D- n8 n7 H
<body onload="setInterval('scroll()',second)">4 v% F$ P. n; D. u6 T
<div id="word"></div><br/><br/>
7 O0 t( t2 K( X/ Z
</body>
4 v# W. ^; M) }8 f6 S
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">8 p. M' y, Y, V5 }
<html xmlns="http://www.w3.org/1999/xhtml">
$ f$ Q# P: N$ I
<head>. a m( _' C" r+ {: H4 p
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ I! F' M3 q8 i0 _6 \
<title>无标题文档</title>
; W: L6 m# \- H: N
<script language="JavaScript" type="text/javascript">
/ C$ ] W3 h( p8 a% L9 Q
var second=5000; //间隔时间5秒钟
/ ^" ~0 B ] i
var c=0;4 ?- L' B; V7 C
function scroll() {
+ M, z) D; n; K& @% P$ y8 H6 g
c++;
& I0 p7 d; P& N1 E0 T& R! G
if ("b" == document.activeElement.id) {) T R, ]7 Z; @$ d7 e
var str="定时检查第<b> "+c+" </b>次<br/>";
! {, C+ P; i8 j' @
if(document.getElementByIdx_x_x('b').value!=""){6 T4 K) H1 X5 e g' O
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";% @6 p5 F: S' f4 z# F3 |6 s" |, @
}8 l% e% C6 q2 f+ v6 \. h. Q
document.getElementByIdx_x_x('word').innerHTML = str;
5 B9 E3 O9 g( O( c
}
. |- C3 `) G4 ]
}
, z |$ r) J9 f. G3 Y
</script>
' g1 U8 Y0 e! g- v% B8 B
</head>
7 V1 Y C; ?* e, R! L u/ L
<body>) G6 u9 L9 b0 R4 a) T( ~+ [+ t
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
/ _) i3 ^" ^& [8 Q$ P$ a3 S
<div id="word"></div><br/><br/>
8 C4 e' f* u2 q) \( Q* \& A
</body>
: `4 h. N: z6 D8 ]
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">, F1 {' s1 y5 X. I+ n( B5 C
<head>4 T3 s1 Z( F5 F
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! n/ X5 e' I6 U8 d: S; J+ u8 r& W
<script language="javascript">
& i9 u3 e, M$ d3 |8 d
function count() {
- b& |, N* H1 ~! L. F
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
8 q$ N* s6 l/ @' U
setTimeout("alert('十秒钟到！')",10000)
' k9 \" ?) ~1 p
}+ l: G* r% B5 Y1 I/ z
</script>& }* D1 r) n/ ]2 P5 q6 R+ q
<body>) t3 b, O0 }5 \( _
<div id="m"></div>
0 g' r' o# G5 I6 ], [3 E
<input TYPE="button" value=" 计时开始" onclick="count()">% a1 T8 K, O T) P0 i
</body>' A1 E: z* F3 i* r3 p8 {
</html>

复制代码

例4:倒计时定时跳转

<html>2 s6 _. b& a5 a7 f" j; S
<head>
1 g d4 ~: h G% i4 k- ~
<base href="<%=basePath%>"># ~& B$ T$ B# X! O& e
<title>My JSP 'ds04.jsp' starting page</title>8 G: L ^- e" |2 G5 o2 s& F9 g/ L: L
<span id="tiao">3</span>
. t) Z# j. U% Z! D
<a href="javascript:countDown"> </a>秒后自动跳转……* Y4 j* d. z, }. S- K0 I6 B! l& f+ `# V
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
7 J1 |; Q9 C( R2 Q9 W1 R
# U% |( }& f5 U H4 `2 S4 x" t
<script language="javascript" type="">
# J4 W# y. u# k/ I
function countDown(secs){8 D# I5 c% o. S. H' ]
tiao.innerText=secs;; i- I% K, m/ O
if(--secs>0)+ E3 [; |6 T3 U0 v$ i
setTimeout("countDown("+secs+")",1000);/ d5 v- _" v! a7 x% s/ N
}. t7 u% |# [) v
countDown(3);; j7 d( k/ X* k; F$ X
</script>9 [. {( v6 p: K# b
6 T1 y% e" k- M$ K* |& m, m
</head>

复制代码

例6:

<head> 8 v; a; U% G" h" H- I
<meta http-equiv="refresh" content="2;url='b.html'">
F# g( a9 ]/ p$ h
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">4 D# ^/ x) m }6 p6 t
setTimeout("window.location.href='b.html'", 2000);1 m) n% ]9 x8 ?/ T* o0 \
//下面两个都可以用
" G) o" s. m# O) X4 W
//setTimeout("javascript:location.href='b.html'", 2000);, E+ Q: ?% S! Y
//setTimeout("window.location='b.html'", 2000);8 A% \1 |% r. G' v+ _" A, j
</script>

复制代码

例8:

<span id="totalSecond">2</span>
3 ^3 c" P7 L% C2 {- }& P
<script language="javascript" type="text/javascript">
7 C/ ^9 T: M+ l8 e7 N
var second = document.getElementByIdx_x('totalSecond').innerHTML;
5 ~2 O4 b$ W2 ]7 w/ O
if(isNaN(second)){
. _; \; h9 d$ T5 `
//……不是数字的处理方法
! J* `9 h9 M% k! R
}else{; ?1 R& f/ L% m; [; _8 I
setInterval(function(){" g7 j! M, D9 _1 j w
document.getElementByIdx_x('totalSecond').innerHTML = --second;
7 \+ N: Y1 |6 o9 l D
if (second <= 0) {! m- v1 D/ t) o1 s' p+ j. l) y+ q5 e
window.location = 'b.html';1 q: i+ p! q6 Y% }
}" t3 S. Q# g, h4 ]
}, 1000);
- |) R( k' W8 j4 C6 c% v9 I# T
}
0 L" {6 M3 u% B1 O' R; a) Y
</script>

复制代码

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

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