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

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

1，只执行一次的定时器

<script>
6 ?* f4 e' g& `, j v
//定时器异步运行
1 @1 n7 m/ v7 |5 y9 Y z3 H
function hello(){ # X/ r. [5 u: @+ {9 F$ a
alert("hello");
* i$ I3 h4 n8 { [
}
1 }$ K5 k2 T. V/ c; ^
//使用方法名字执行方法
; r( j# [! l5 g4 d( ^
var t1 = window.setTimeout(hello,1000);
2 o1 y4 d; h: \2 C0 m3 l* J
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
0 P: { Z- M. H: Y8 n* {5 K
window.clearTimeout(t1);//去掉定时器
& u4 n7 }2 l+ Q' W" G$ g6 ~ ^
</script>

复制代码

2，重复执行的定时器

<script>
. ~, L! g- J% b, v4 w% |, o
function hello(){
) _2 X4 L1 ]9 L' c
alert("hello");
1 l5 Q) F5 I+ P, x5 Y
} $ n1 v) q, q ^2 O8 {, r/ R) R
//重复执行某个方法
1 d$ N8 d N7 k4 _
var t1 = window.setInterval(hello,1000); 9 H7 `. J6 `% b
var t2 = window.setInterval("hello()",3000);
0 v6 d/ L! d, B& B
//去掉定时器的方法 ' [0 X+ F. z. k% r" W
window.clearInterval(t1); : I7 e: r- Z+ n. d
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);& j6 w7 y9 ^# k
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成' q7 r% I' H" m* S7 W2 k- V5 p
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
) D8 m/ B3 ? P. X　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
: X5 h6 O! D( F+ g* p! @+ B比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
* @ @5 y: i& l" J8 U# H' i; H则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。) p1 e9 ^# P; ?0 c* s" c. [% G
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
7 r- q; Z4 D7 Q% o- X6 ~( O DsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.9 m/ a0 o, P* ^6 E3 b' k
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象* R3 G3 w) {# A8 {* s
clearInterval(对象) 清除已设置的setInterval对象

略举两例。/ b. S9 C# \0 t
例1.表单触发或加载时，逐字输出字符串

<html>
$ e0 R- Q7 H% g# s# I
<head>
+ I: i3 O( P: \
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6 E7 i$ @7 Y) ]& \
<title>无标题文档</title>
: E7 p; V, O- o+ x, c
<script language="JavaScript" type="text/javascript">4 S& e; O% [: m" w4 W
var str = "这个是测试用的范例文字";& }: \! ~2 f4 ]' {; I6 D' l; ?
var seq = 0;7 E# q: V- i: p7 I
var second=1000; //间隔时间1秒钟; O% M: W0 ~# p- o" `+ v, a
function scroll() {
+ U% X$ i6 ], s& P0 H
msg = str.substring(0, seq+1);! R. L4 p: Z1 L4 [4 V, u
document.getElementByIdx_x_x('word').innerHTML = msg;5 _% E* l* B E- {/ i, c
seq++;+ ]; @6 `: U1 ^& ?: n. g1 o0 \
if (seq >= str.length) seq = 0;
' e9 v3 f! z1 Q6 V8 D$ w
}9 l: {2 @1 l& L
</script>1 J& Z3 B! i9 J
</head>
% T! v. h& P: a2 c9 X
<body onload="setInterval('scroll()',second)">
- a* e! S k r7 y
<div id="word"></div><br/><br/>
# @+ Y ^' h/ d, D
</body>2 O) g0 I3 y# W ~5 h# ~: r# I- f
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 o% @) p+ t9 Y2 l+ P/ V, d
<html xmlns="http://www.w3.org/1999/xhtml">5 S8 ~, ?/ h5 h2 t! M1 w1 w
<head>
& X$ x# Y; D! G6 E f1 q
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
1 m U" e z A: S" `
<title>无标题文档</title>
( B. K5 F5 e! x5 k
<script language="JavaScript" type="text/javascript">
" l% B6 ^; ~5 G% E1 M% ]
var second=5000; //间隔时间5秒钟
' C! Q6 C+ g* @1 c: ~2 y- `
var c=0; M6 q/ H% {0 Y( v, @. w8 Z1 p, U
function scroll() {* U# U! F9 q6 B( c, Z6 ^1 b* }
c++;% M9 F5 k; x6 e. p( O* {# ]
if ("b" == document.activeElement.id) {
" D2 l; f4 a' \. n1 a$ P1 O
var str="定时检查第<b> "+c+" </b>次<br/>";$ ?" W3 B) e. Z# P6 ?' k8 ~
if(document.getElementByIdx_x_x('b').value!=""){
7 h8 i( w7 H$ ~1 ^0 k* y4 D
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";! g) A; ^! o( v
}3 c' ?) I5 @' _/ f K, x
document.getElementByIdx_x_x('word').innerHTML = str; o0 j$ b ?* L9 C
}, k* W+ w- ]3 f/ a( Z# c) P: X
}8 e; @/ r q: L( X& a
</script>
. t5 u1 d$ D o# r
</head>2 M7 b" U% R$ J; m( q6 u
<body>, Q7 o6 Y, s1 m9 o/ }9 ^
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
2 `. j; U# r, r& P; ]9 l
<div id="word"></div><br/><br/>3 g! k* x3 v! o2 [
</body>% |- {; }2 Y% M: K! A, D: K1 N
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml"> a, ]& I8 I0 M+ C& R
<head>
1 }0 }$ {" z$ ~ h8 k0 @) ?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
0 h% [7 P% e7 \) L: ?7 ~" t' ~( y) j+ H
<script language="javascript">7 q& F+ [9 v: K( ?& i6 P
function count() {5 f l* k, N1 i- M) s- F# q$ G: P
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";6 }( e' i. e- m6 h- g. [3 H
setTimeout("alert('十秒钟到！')",10000)
x( q" I" d; J, a6 A; r T
}3 _5 D4 D7 Y c4 V6 K: N( q" _; k2 O
</script>
# _4 C; W. H& b. i5 H# L
<body>6 K! {( Y- W% J; A' g5 E
<div id="m"></div>
! ]) n9 }+ V& s% Z/ z
<input TYPE="button" value=" 计时开始" onclick="count()">
& Q/ I; R/ ?1 u2 s( J% N
</body>9 A) q! S/ l* _; x5 [
</html>

复制代码

例4:倒计时定时跳转

<html># ~! z, V H5 O' f* K. K% k
<head>
) G) |4 v8 k# I" m# J% u
<base href="<%=basePath%>">
$ R1 i# ]0 t- Z# Y4 I4 E7 b
<title>My JSP 'ds04.jsp' starting page</title>: U3 N: \- W0 @5 P1 [
<span id="tiao">3</span>0 A b% \+ D1 O
<a href="javascript:countDown"> </a>秒后自动跳转……
0 m9 K( l# b2 q5 T9 J) b9 ?0 e
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
: d9 [/ v1 e0 V5 _
' X: s2 L9 f4 F
<script language="javascript" type="">
' L7 {8 t( R( S5 x! O# l
function countDown(secs){+ S5 M. R& n* T7 o9 f" E' u6 t
tiao.innerText=secs;
7 a: J1 Z. {( e N8 x2 d
if(--secs>0)
; |/ O+ ]( d1 ^" E( a: g; o. R9 L& V
setTimeout("countDown("+secs+")",1000);
3 C6 Y5 h" R' j: B( O
}
" J# |) v/ O. c# ^/ M
countDown(3);. I! M* B/ M0 i8 R6 \! o
</script>
, a- w |: Y S5 l
: u- m! D- n; B! @
</head>

复制代码

例6:

<head>
# ?8 O5 A" q* V4 F6 q8 D
<meta http-equiv="refresh" content="2;url='b.html'"> 8 p. a/ `" g# W. M( j$ X
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
A! U- N" Q6 z7 g, N+ ]$ H% k$ s
setTimeout("window.location.href='b.html'", 2000);
# f1 F' c& j5 l2 u9 `( R8 N
//下面两个都可以用
- _+ h* x, v9 w' k" |, M9 o$ N
//setTimeout("javascript:location.href='b.html'", 2000);) c3 |# g, B1 o% n6 U' `/ U; _
//setTimeout("window.location='b.html'", 2000);4 e. p+ x. l: y1 `5 S( Q4 s# l
</script>

复制代码

例8:

<span id="totalSecond">2</span>/ I" k4 j7 ^7 M$ A0 E5 q! J
<script language="javascript" type="text/javascript">9 S6 f7 J! o* |8 w' e
var second = document.getElementByIdx_x('totalSecond').innerHTML;
5 O0 ^% [& A2 `- ?- A2 w6 X
if(isNaN(second)){
3 X( f, Z: |1 H9 s) O3 Y1 h2 \
//……不是数字的处理方法
8 \/ j. Y1 g: h; I5 c
}else{
" s0 j9 X& ^& Z3 ]& C
setInterval(function(){! e1 S. p9 V3 G# ?- v* b
document.getElementByIdx_x('totalSecond').innerHTML = --second;4 N6 O6 n( { Q
if (second <= 0) {+ F* l/ ]# p9 J
window.location = 'b.html';
/ M5 Q. @% o6 m( p S
}' @5 z. m* f9 p4 [2 B; g; |
}, 1000);9 L: u& u9 X$ D% q; p4 w3 @
}
4 h; Q$ f6 K. U7 ^! U% [, }% @( c
</script>

复制代码

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

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

浏览过的版块