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

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

1，只执行一次的定时器

<script>
" X7 s8 p8 f4 \( O3 a( R
//定时器异步运行
2 K1 Y6 s, | B2 M& C( F
function hello(){
* Q5 z% K, O+ y8 d( Y/ a: y
alert("hello");
3 G; W+ ]5 q* b) a' m9 n( e) @3 z
}
1 h7 _2 a8 S: S$ G. G; u
//使用方法名字执行方法
' `$ Q; D3 J( j5 c5 c1 G8 z
var t1 = window.setTimeout(hello,1000);
$ X& a6 y* }" W o" M
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
5 b5 e U' O* g& e/ L* Y! X! Q6 c1 n
window.clearTimeout(t1);//去掉定时器
0 a7 ?& n+ y9 P" f& a
</script>

复制代码

2，重复执行的定时器

<script> . y. Z" ^: a* U3 k% _ {
function hello(){ 8 n* ]5 W3 f8 ^+ V
alert("hello"); 0 H+ C4 G- m. j% b( b8 y
}
: F( E5 ?% y: P, W1 V% P! C
//重复执行某个方法
$ J* c' }0 c* g
var t1 = window.setInterval(hello,1000); - E# }" d4 m. X8 L4 o% \" p" D0 Q
var t2 = window.setInterval("hello()",3000);
* x0 E Y% j, f
//去掉定时器的方法 4 x2 t5 `( o7 o+ z
window.clearInterval(t1); ; @; b. M: n$ E* N8 } Z
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);- W9 U8 W9 h, w# {1 ^) o
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
7 Z1 e: ?8 A: Y7 V' C% E- C" j“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
& I, O4 f0 f7 j( x( L# K& v u- w　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。' v' b, R) M& c6 u
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
) @% [+ G9 z4 t. {+ |+ s, R: R9 h则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
9 d2 u4 s7 H$ x8 A$ @8 c4 l比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
4 i2 Z9 E6 [6 o% \- m6 isetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
) \$ L- \; l% S4 {- c" \setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
" p9 Z+ s2 O6 U( @. t7 RclearInterval(对象) 清除已设置的setInterval对象

略举两例。" z6 E& M1 H* v9 C5 P6 }! M
例1.表单触发或加载时，逐字输出字符串

<html>$ X2 n/ L0 ?% @% b( x1 ?
<head>
( G3 T2 {0 p5 x J8 t0 _' B2 D# M
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 U0 _( X1 h/ v1 v3 C
<title>无标题文档</title>
1 a5 L9 K9 ]; r, Z+ I
<script language="JavaScript" type="text/javascript">
. f- ^& o- L, N5 k
var str = "这个是测试用的范例文字"; V" y6 D- V, g F2 K
var seq = 0;
' _3 d! M' S( m+ J9 t
var second=1000; //间隔时间1秒钟, G$ O& v' ^5 Z4 n8 U1 I
function scroll() {! n9 `& v5 n) p0 e6 U" X
msg = str.substring(0, seq+1);. }8 g$ D4 ^$ g& y& `6 }4 L# I' Y( N
document.getElementByIdx_x_x('word').innerHTML = msg;
& o! \. H0 O& e5 R
seq++;
2 t0 Q& u% T+ Z& W5 J
if (seq >= str.length) seq = 0;5 e+ n G, `9 J" w. n! g# l, o
} S8 T# u8 J& U1 Z3 w, k* g1 t' j
</script>- [% p- T0 \' ]& c
</head>, z- a3 ? @. T; S) U
<body onload="setInterval('scroll()',second)">; i7 d/ [ n$ @! ^( M( F2 U
<div id="word"></div><br/><br/>
: H4 r! Y( [' G4 O
</body># L$ q- z) W, P
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
: }5 H- N. a; {6 ^+ \
<html xmlns="http://www.w3.org/1999/xhtml">& N1 M4 j) H" @/ I# D- a9 k
<head>
! a$ H: L" n) W3 s, M
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 O8 I# }; X+ U1 p5 h1 S, ? V
<title>无标题文档</title>
8 ^7 D! t6 M) ^) p, x0 @/ X
<script language="JavaScript" type="text/javascript">
6 o Y) U& h: E9 Q5 W: B
var second=5000; //间隔时间5秒钟+ A }$ h) j l
var c=0;3 L4 @4 P' b/ M& b! N
function scroll() {
9 J* ^# w1 |* t
c++;
if ("b" == document.activeElement.id) {
" Z' K6 Z! x1 a& g
var str="定时检查第<b> "+c+" </b>次<br/>";) q5 ~0 N5 \( @$ Y6 P
if(document.getElementByIdx_x_x('b').value!=""){
' {5 ~' Q8 D% x1 B
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
& c1 i% h7 d' O* o- u! G
}
' H% O* ~8 l& O$ u4 _/ e* t
document.getElementByIdx_x_x('word').innerHTML = str;; H" Q% d9 I3 H6 W, f6 t6 n
}' z4 f" V9 @( M5 ]
}% P7 i- @; A9 S4 Y$ k, D7 l
</script>
* i# T( A* \: u- S5 C* G: Z
</head>
% e& D5 B5 y$ R" h. Q% M8 f
<body># U. u" v8 L4 h0 d1 T H# [* L) l
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>" q" X7 Q8 G# U* z7 G/ u; H
<div id="word"></div><br/><br/>4 z* _; b" R: a) H
</body>/ c4 R1 L) Q8 N1 x
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
' |0 E2 t- D9 U' Q. i
<head>
2 F8 s) p* v# B2 b5 |/ n8 L2 ~7 N
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* [. m4 d& R1 w
<script language="javascript">2 A, n- F C( ?/ B7 a( G' R/ L
function count() {+ [) c$ _7 J: ~- b
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
9 ~0 q! X+ d) ?4 m* n1 w4 ^/ _7 q
setTimeout("alert('十秒钟到！')",10000)- M: i& `+ \/ Z6 c# A! m# Z
}
" U& x! F. J' U
</script>* X) P/ {! Y, ~
<body>; x4 B! _. z& Z) \: J7 F# p
<div id="m"></div>
1 k3 _1 |9 d7 f1 ]2 T9 Y6 l6 e
<input TYPE="button" value=" 计时开始" onclick="count()">; W' Y; R; }/ t0 V6 f
</body>' W0 L0 k' _4 i6 X% W
</html>

复制代码

例4:倒计时定时跳转

<html>
# V% b4 S+ L! q: C' n1 Y. A x
<head>
2 A: W$ U6 O) z% q( H/ ^
<base href="<%=basePath%>">6 F9 @4 C6 V% K3 w
<title>My JSP 'ds04.jsp' starting page</title>, d/ W& Q) H6 \* c9 z
<span id="tiao">3</span>
7 P% Z: b; d; A. w
<a href="javascript:countDown"> </a>秒后自动跳转……
f) A& C) {% L0 g, v/ w% u8 y
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>4 R% k' j4 W! |6 C1 i; p8 L
; W9 `5 g. ~. z) L0 Z
<script language="javascript" type="">
5 F) a5 l5 x+ [
function countDown(secs){
6 O' w1 v% c8 O. K" t% x4 g d: _& x
tiao.innerText=secs;4 v% E8 y& W8 W+ _8 ^- r8 l
if(--secs>0)
$ b( U2 e8 u0 N2 ^% o& s- b- Z
setTimeout("countDown("+secs+")",1000);- E9 F/ @4 Z0 P
}) }5 P) g/ d+ a: C% g% z8 ^# M
countDown(3);7 A0 |: }: P& }( m; v* A0 F
</script>. X1 M. g; I9 w0 f% s9 \
R% F# k! w( v6 Y' L ^! v
</head>

复制代码

例6:

<head>
3 k+ W4 D( j6 Y8 q( Z
<meta http-equiv="refresh" content="2;url='b.html'"> ' u) I" [1 b+ s1 U( ~! }/ z6 L
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">8 K9 Q3 Q# I8 P
setTimeout("window.location.href='b.html'", 2000);
1 o+ q$ e- i6 d$ i$ @
//下面两个都可以用$ S& c/ ^7 g) {+ s" }1 R# t, c
//setTimeout("javascript:location.href='b.html'", 2000);
# V- K4 ?6 {! v" d
//setTimeout("window.location='b.html'", 2000); X# d& d3 f0 z3 Y
</script>

复制代码

例8:

<span id="totalSecond">2</span>
2 n8 O9 N# q; j: Q
<script language="javascript" type="text/javascript"> j# N. b. j+ ]0 ^& t& T( d6 K; G
var second = document.getElementByIdx_x('totalSecond').innerHTML;
9 ]/ v3 {8 t- z# u$ a$ l- t
if(isNaN(second)){
: i: f; ~0 r$ v6 B7 ~& _
//……不是数字的处理方法
: |) d7 ~+ T. s7 E$ q4 [' f3 b
}else{ h0 Z6 a0 z4 _" z) Q$ S
setInterval(function(){
z4 _% e- \$ c1 t: Q$ r- H e0 z
document.getElementByIdx_x('totalSecond').innerHTML = --second;
: r ?) L! Y% s
if (second <= 0) {- d0 T( p) ~' v! g( X
window.location = 'b.html';+ `! A/ f% v& A; X3 G# ]8 Q
}
# J+ E+ d& }! s! c: F
}, 1000);! r) w5 y0 D4 \
}
' ]- `/ V3 ?1 u
</script>

复制代码

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

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

浏览过的版块