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

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

1，只执行一次的定时器

<script> 3 j- M0 \4 T. b, b3 V% P% ^7 Z9 P
//定时器异步运行
4 D+ e* S5 W2 c7 m
function hello(){
0 U) e, v% \2 y$ H0 j
alert("hello"); * \6 Y2 k. X. C+ j7 |
}
6 U& e% k0 b" M
//使用方法名字执行方法 . g! J7 z, g* C- W# @4 _7 d2 e1 g
var t1 = window.setTimeout(hello,1000); & ]5 _$ Z% s+ f8 ^0 A+ j3 r
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 A! u* R# r/ t, S3 ?
window.clearTimeout(t1);//去掉定时器 3 d$ |5 o, V0 w: x3 N1 Y6 _
</script>

复制代码

2，重复执行的定时器

<script>
( F0 J& V; [" i3 \) o+ ~+ y0 L
function hello(){ ( Z/ U( T) c7 A: v& p8 C6 |
alert("hello");
/ |, z2 i* M5 E9 J, d$ o2 l& Q" I
}
* z$ k5 D+ `) S! ] x# l) G" h
//重复执行某个方法 1 u& C& S! [1 k4 q9 W2 A9 M4 F
var t1 = window.setInterval(hello,1000);
/ Q, K3 z6 O( v: o8 r
var t2 = window.setInterval("hello()",3000);
2 E# f. o' C, b/ F" B4 N, V
//去掉定时器的方法
5 s- g' d8 U8 |4 r) r3 {( b
window.clearInterval(t1); # k* _/ M* _: _( P0 J3 o
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
! `! S" i7 l' f7 U3 H* s2 h2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
. p K" h: l) [! n8 W“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
6 n E6 m% p p: b　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。; M* ~0 V5 b6 A. Q: A4 y' g
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，) ~4 o; a1 @) |( ?
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
# Y- [7 V1 R, x7 d5 [; `% V2 c比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
# I* z0 E6 U/ Y& f& tsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.& A, x* t/ o' y3 A( F& k R" }5 j
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象: n! A) ~# @4 t# X+ V: e
clearInterval(对象) 清除已设置的setInterval对象

略举两例。9 P9 |% w' s4 |0 Y% Y1 k5 j
例1.表单触发或加载时，逐字输出字符串

<html>4 n+ r, I! y. N6 b2 ` u4 f
<head>" Q) }# g9 `. ?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# P& I$ m2 q+ l( T
<title>无标题文档</title>
' I: s M! |- x- r g5 u! a Y
<script language="JavaScript" type="text/javascript">
" o( B* y- v0 X$ ^/ e
var str = "这个是测试用的范例文字";
' J' n. T# d4 I) T* ]
var seq = 0;
" u4 I: R- b. `7 e0 }0 \% D7 f" W
var second=1000; //间隔时间1秒钟
7 Z: C+ T! U+ ]7 H/ N+ U f
function scroll() {
" z" E/ \6 E! y. ?% S
msg = str.substring(0, seq+1);
% \$ r d$ f* A7 V: S6 m
document.getElementByIdx_x_x('word').innerHTML = msg;
) r3 m2 E% I+ s
seq++;% K0 ]" l& E, E" |
if (seq >= str.length) seq = 0;8 G7 t" M/ C3 l# |: h
}) N1 R' k3 o$ v. R
</script>+ K- ~, O; ]6 F8 I: D
</head>- x& R2 s7 i, O* q9 H5 I& [
<body onload="setInterval('scroll()',second)">! A- |8 z+ A/ A9 E+ T, x' C
<div id="word"></div><br/><br/># B+ f+ D0 y& ?3 h" Q2 r
</body>! B! V! \# A/ k% I2 `9 V0 q9 o
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
' K: [/ W/ A6 l t, P' r
<html xmlns="http://www.w3.org/1999/xhtml">
# _7 U7 H; e# f
<head>
1 j( d" ~9 g7 b# j! z- t& A+ J/ D2 v
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* ^- a* h& n5 A& A0 x/ n
<title>无标题文档</title>
$ R, C! z" @* D" d% `
<script language="JavaScript" type="text/javascript">6 P V3 m' w, Q
var second=5000; //间隔时间5秒钟
) i: Q. h8 w6 E/ S3 i- ? N
var c=0;
! t' ]9 T( t6 {4 p5 v
function scroll() {
$ Q+ \6 h' }7 i5 V
c++;
# S, ]9 z3 Q' b, {5 P7 F, m3 }
if ("b" == document.activeElement.id) {
" G, U* {2 r0 Y* g# ~% v" N9 \, ?
var str="定时检查第<b> "+c+" </b>次<br/>";( g, _$ _' w. }8 M! n" P2 B- \
if(document.getElementByIdx_x_x('b').value!=""){8 b& z# ~0 {1 g' w% t- l
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";( @. a! I' o4 V; H6 v, V l: n8 j' x
}
6 ?- V4 n1 Z! ~, d$ r
document.getElementByIdx_x_x('word').innerHTML = str;3 s4 p( g' P* J& }" A
}
7 @3 [. b1 g6 n. R$ v6 l" t3 E) ~0 h
}
5 s: y" s0 ~# q- t
</script>+ [( H$ F7 X6 E$ s; g
</head>. k0 d& o4 i: k+ m1 _% `
<body>
# Z' d: h! D5 P b" m
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
) _ n$ H9 ?3 V3 D: B: p
<div id="word"></div><br/><br/>
1 U* n; t8 \0 w5 Q3 [
</body>
4 K. f# m# \* D" k
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
]4 N3 x* c& {6 o( N! K7 K
<head>) Q$ V; S5 F% ^) ]' [% f5 R
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* h+ ~. [7 w2 \8 o1 l" V
<script language="javascript">
2 v4 z: @' M2 G5 D
function count() {
) D$ `" X* ]8 n7 u6 l7 r; e' G
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' ~; h1 X+ b# }
setTimeout("alert('十秒钟到！')",10000)
8 t8 G. k$ o/ m; T
}
/ K4 ~) L' N/ F
</script>7 b5 w4 ~. T, X3 E) X
<body>
2 f1 Q6 y8 l6 p- k- z$ M
<div id="m"></div>0 R+ E$ ^% H4 J. v
<input TYPE="button" value=" 计时开始" onclick="count()"># L3 E, M. l' l; S% l* J
</body>
1 C" Z- W: z$ D/ G0 ^9 |* w! {% p' M
</html>

复制代码

例4:倒计时定时跳转

<html>
! ~& D* H) \5 s- T0 S x- E
<head>2 f9 P4 r3 T% J; W7 l3 N
<base href="<%=basePath%>">
1 K8 E4 R2 ^. k5 ]9 c2 w9 e
<title>My JSP 'ds04.jsp' starting page</title>
) G$ ~: C. r- _0 P
<span id="tiao">3</span>, n! T6 m7 B$ j. T2 i% m" ?* H: z; I0 y
<a href="javascript:countDown"> </a>秒后自动跳转……3 T: M" r. k3 B6 v& J
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>$ \1 N) t0 L% Z
/ q2 u- o' Y5 d& j
<script language="javascript" type="">
2 m2 X- ]5 G- v, m/ n4 M/ i# [
function countDown(secs){
% ]2 j* Z; i9 @7 T# i+ g* c
tiao.innerText=secs;
/ K0 @/ A& E5 ?: [8 }3 D0 k( F
if(--secs>0), B( e9 x# H& Y6 s
setTimeout("countDown("+secs+")",1000);, l% S" |3 b1 R5 z, r% {( A
}
( H" n+ ?) T) Q0 s/ [* b2 E
countDown(3);$ k/ o9 j0 i3 I2 z1 T
</script>
1 q( r8 T1 D, l5 |! {! e! t1 y
- J6 K* \* X' @! K
</head>

复制代码

例6:

<head> & d; K, r% i3 n
<meta http-equiv="refresh" content="2;url='b.html'">
* g* {6 ~# `8 j1 g1 f) B6 F1 \
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">! X4 D4 g2 f+ K
setTimeout("window.location.href='b.html'", 2000);, ]1 Z' q/ @( f- e3 O5 l5 \: R
//下面两个都可以用5 `1 B9 \3 E; i
//setTimeout("javascript:location.href='b.html'", 2000);( r8 f( a- Y2 Y+ M* s) E3 S
//setTimeout("window.location='b.html'", 2000);/ V- g$ P" d ~% Y- }; a
</script>

复制代码

例8:

<span id="totalSecond">2</span>7 k @: H: E- c
<script language="javascript" type="text/javascript">$ J! c, ]1 Y3 Z+ z
var second = document.getElementByIdx_x('totalSecond').innerHTML;& a; [: C$ Z& r% C. A; l
if(isNaN(second)){' C& R) j; q/ R0 M u
//……不是数字的处理方法, i+ \! _0 ?, g( t# @% D
}else{; g3 ]/ o# N; E0 v" q7 ~' `9 C
setInterval(function(){ j0 b# e6 g$ M: _7 s2 {1 \1 k2 m, _
document.getElementByIdx_x('totalSecond').innerHTML = --second;
( q: V1 x! I! i. B: l4 m0 C
if (second <= 0) {: \, R% N/ m p* m5 l z/ n
window.location = 'b.html';
# V% l. ?; {& ]: _. V7 C0 I5 b
}
+ t9 S+ U p2 ~, o
}, 1000);
: U; D$ E8 f. I5 e! d7 p
} " @5 U5 w% U. ?5 l
</script>

复制代码

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

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

浏览过的版块