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

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

1，只执行一次的定时器

<script>
, c* B' q! G! t
//定时器异步运行
" y1 E1 m0 U9 F- Z$ G
function hello(){
) e5 L" c% w4 B: {: z; `% y1 h, {
alert("hello"); / w( O& C& G& L
}
) I( Z& j4 Z7 i$ |) Z
//使用方法名字执行方法 , R2 W; c- ]" p7 Z" K7 x
var t1 = window.setTimeout(hello,1000); 8 \' P& ~9 b. q3 h2 @/ u. l" ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ( Z, ~5 u0 ?# ?: K. l5 M4 q5 s) k
window.clearTimeout(t1);//去掉定时器
6 ?. u; }( W: F9 d1 C+ D- D
</script>

复制代码

2，重复执行的定时器

<script>
1 `7 |* m5 i3 h' q) g) m" V
function hello(){ ) o" f' ~6 S* l* Q v1 l3 o# r
alert("hello"); * ^# M. I1 _- M% y
}
& o4 `1 [+ S8 g
//重复执行某个方法 1 l C: N, B4 [6 J% m$ a3 L3 C
var t1 = window.setInterval(hello,1000); 3 G$ c1 ?7 u! P5 \2 i/ y8 C& M/ h
var t2 = window.setInterval("hello()",3000); : f0 G2 |* l% v# F
//去掉定时器的方法
* ]4 G P/ G# j ]* S9 b' t
window.clearInterval(t1);
' D, h ~; a5 c+ Q% ?0 K3 t0 r
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
2 J8 B4 C: m# X# u9 o( u2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
5 x3 C8 I9 l8 @% s1 A. j“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。/ d, u0 Y. I* q" P5 H, p1 ~
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
% U9 t' [1 u3 A, S; U比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
0 f! D+ }9 J. U( \3 T/ u, Q则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
5 G5 F+ U( p5 ^比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
0 Z5 X7 v4 f7 \+ Q! P- z: tsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.( ^. o# D+ Z4 u7 m8 m
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象7 G0 v) J/ ^7 E7 V* Y: Q
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
' H3 r* D$ T; X, f* k例1.表单触发或加载时，逐字输出字符串

<html>
4 W* E2 E$ C u w
<head>
5 {# R" H) F" E# |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, N- o, G- J. J' Z
<title>无标题文档</title>
' O+ x3 K5 y/ {+ w7 ~9 c; M
<script language="JavaScript" type="text/javascript">5 G2 [0 t8 G, t+ H5 T' V4 b* v6 P
var str = "这个是测试用的范例文字";$ @9 j+ V( H3 t8 ~4 n% p
var seq = 0;
" F9 i$ K5 O. ?6 p% b' O& B' z# c
var second=1000; //间隔时间1秒钟
5 X5 q0 c- R4 g" A
function scroll() {
% e% U. s" S; \# k; q
msg = str.substring(0, seq+1);' r3 X1 N; h2 l6 c- Z
document.getElementByIdx_x_x('word').innerHTML = msg;
) @- I* V' Z: c7 O ?
seq++;6 N/ G1 e: p- P V
if (seq >= str.length) seq = 0;7 d, G2 z4 p* \! C) i5 i& n
}0 g2 H, @# j7 i6 E# u7 }, d
</script>( A6 B6 D+ s! `( j. n9 E1 U: o% `
</head>
# D/ M" D9 P# u, E% L
<body onload="setInterval('scroll()',second)">
' Q0 _! l( |4 n: |' _
<div id="word"></div><br/><br/>( X4 v" M5 K/ L+ Q2 j g
</body>
6 t: g, n: C2 S5 f2 J Y4 T0 s
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 H5 S6 Y6 i1 ?; Y
<html xmlns="http://www.w3.org/1999/xhtml">
# ~) D5 @7 T" O
<head>
2 w# _ e* u0 N& c
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />1 G" ^) z# J: J& c5 | o
<title>无标题文档</title>, F6 C8 {; Z, W/ ^) n w- }
<script language="JavaScript" type="text/javascript">
! s2 @6 k: k$ l
var second=5000; //间隔时间5秒钟/ s+ \8 X5 X! S
var c=0;+ b3 |" f: F5 X* B \4 e
function scroll() {
4 j5 x! d1 c; W- p p
c++;
, j, `/ |& S# f' F$ i
if ("b" == document.activeElement.id) {
~7 W2 Z, e, x' x* V
var str="定时检查第<b> "+c+" </b>次<br/>";
, @7 J+ ]- j: j- u9 U! h
if(document.getElementByIdx_x_x('b').value!=""){
- p# B0 r6 H2 E# S2 _( F
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
/ A" B0 X d2 g* Q! f9 A; a3 O
}
" H4 G3 T) e# z8 u
document.getElementByIdx_x_x('word').innerHTML = str;# y9 ^! o# Z5 q$ q! U
} u- z* m; a$ m2 _0 b, _6 y5 A
}
0 M* i2 W/ F" {9 K, f1 }
</script>! T, ~% G+ b m! m
</head>3 F& P0 L* }+ E! u1 t' @$ E' i
<body>$ \. M6 Y8 E$ r; B
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>0 E$ G' z0 i& B2 }. }5 u% k
<div id="word"></div><br/><br/>
- a" \2 I9 |' E5 d2 Z; {8 x" g
</body>
; w: b! z7 `* [
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
5 G) m: {3 L8 M! \3 k
<head>$ q8 g/ a! i5 x* s: d* M4 x- W6 n# |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 c! d% c* }) h% L2 r7 O4 `6 H
<script language="javascript">
* X8 E8 G6 s7 H% E) @: V0 N$ {. |
function count() {
) Z, z6 _1 H% t( i* \. u
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";7 Z. f; H( |+ Z0 v* x( s* x9 G1 a
setTimeout("alert('十秒钟到！')",10000)
+ b' [4 n& }4 K; D M/ x
}
( V; h- g1 X; {% r
</script>5 G' ]( y+ N3 Q6 u3 l7 E% Q
<body>
1 H& z$ h# P; h- o7 `# G' R
<div id="m"></div>. [( m" S) u6 V5 l% d5 P
<input TYPE="button" value=" 计时开始" onclick="count()">4 p3 J) ^' C j# k) D4 H
</body>
* b3 Y$ h& k% _
</html>

复制代码

例4:倒计时定时跳转

<html>
2 |4 v, s! s( H+ O: d. C
<head>
5 [! m: f3 @" V+ Z) b
<base href="<%=basePath%>">, V& v9 ?: w! ~: D( r
<title>My JSP 'ds04.jsp' starting page</title>
" K4 d: @+ `8 V, J
<span id="tiao">3</span>, }9 O, U( g4 [) b+ e
<a href="javascript:countDown"> </a>秒后自动跳转……
- E) U- q, A9 D B
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
5 Y J- f+ f# a( T- H
. y5 _7 `- ?8 ^- w" ~
<script language="javascript" type="">
/ Y, c( [3 U3 S3 z
function countDown(secs){
0 l" Q5 I- D; n
tiao.innerText=secs;
0 s! \! q. E( K: b/ q. U# J
if(--secs>0)& A) O/ Q4 p8 }
setTimeout("countDown("+secs+")",1000);
) h: a% F3 R: [9 c/ `
}
8 O8 Q# \$ ^& u& M8 z
countDown(3);8 O. [$ n3 c- [/ I* n. R1 I+ [* |
</script>3 [$ e t( Y& Y0 y1 c( n
' n9 U' ^: r% }- p& v# t/ y4 k
</head>

复制代码

例6:

<head>
, t0 K/ `! B; R( I* b2 t: l( F
<meta http-equiv="refresh" content="2;url='b.html'"> % z0 x9 n7 L& M! Q: Q% s: @6 Q2 |6 I/ }( r
</head>

复制代码

例7:

<script language="javascript" type="text/javascript"> d# |) g& F' G& O, Y) H) Y: V
setTimeout("window.location.href='b.html'", 2000);
2 ]! W: Q I5 w ~! |1 ?6 t
//下面两个都可以用
" }6 A- S! x* L' \$ l$ p# a/ Y9 ]
//setTimeout("javascript:location.href='b.html'", 2000);
: B) O& m. F! T! V$ Y) F7 e
//setTimeout("window.location='b.html'", 2000);
3 v% L: U& }5 E
</script>

复制代码

例8:

<span id="totalSecond">2</span>
# k: F6 ~, } M+ N
<script language="javascript" type="text/javascript">2 W. ^! L* M" s/ z4 H
var second = document.getElementByIdx_x('totalSecond').innerHTML;0 }, {! z! b. Q5 d
if(isNaN(second)){
9 y4 v9 k' o; Y v0 W& K
//……不是数字的处理方法
w1 n6 @6 K5 P
}else{# J; m f2 c1 {% K/ S3 b
setInterval(function(){7 r6 D- ~5 Q2 v, d' l
document.getElementByIdx_x('totalSecond').innerHTML = --second;- ~) ~2 g% U9 @' G
if (second <= 0) {+ d& b- ^) t4 D. z
window.location = 'b.html';3 r# p# X3 z7 h3 {/ P* [1 w
}8 l$ w. z0 Z% s2 Q" B, k0 V7 P5 S
}, 1000);
u# S7 G: E# v# Y5 M/ F/ G* p! \
}
) ^5 B& {( q- _( q7 v
</script>

复制代码

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

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

浏览过的版块