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

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

1，只执行一次的定时器

<script> 4 c# V- a" y" ]& ~; p
//定时器异步运行 8 X9 M' J/ u- _, Y6 n8 s
function hello(){ 7 S. c5 ~9 C0 D# y" V$ O/ ^
alert("hello");
% ` e# `* N, |! G3 K/ j1 c
} 8 A& n) i: m7 w U
//使用方法名字执行方法 7 Z6 ^' M, q! M L0 m: l
var t1 = window.setTimeout(hello,1000); 1 A: ~% `$ v8 \9 U! u6 D' @
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 [: y2 k; s5 m# d
window.clearTimeout(t1);//去掉定时器 1 X. a- ^$ _7 D9 Z3 I- y- Y1 z" E
</script>

复制代码

2，重复执行的定时器

<script>
8 d" D! L: N/ k5 {8 |. G* [( n
function hello(){
, R0 a& q' M# k5 Y9 @8 w
alert("hello"); 5 C, h" f) v: F: X
}
3 u( A' e6 G) L- [; `4 \/ k
//重复执行某个方法 6 H# Q+ u3 r+ F+ d6 L+ T1 h W
var t1 = window.setInterval(hello,1000); $ ?# y$ R: }" c1 U: B* b
var t2 = window.setInterval("hello()",3000);
J- L# Q5 P. y$ y
//去掉定时器的方法 2 B3 [% ^1 I+ E# o9 s" T: h% J
window.clearInterval(t1);
2 {8 T; Q8 X9 D# R
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);& A. w9 O% b. F( y
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
, @! ?# ^$ F% I6 R2 S“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。7 [! M* p: i2 v' g [+ N
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
1 {. n9 P* A! K- S3 k6 Q比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
) c% d0 q( c4 w3 x$ V则需要用到循环定时器“setInterval("function();",delaytime)” 。

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

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。- I' J) | [/ h; O' W/ W) l- @( \
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
; f# o8 G* L' p# |6 {" _setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
' ?' G+ O: G7 E) O- w9 j9 L( eclearInterval(对象) 清除已设置的setInterval对象

略举两例。
{4 p& ]- I$ ]4 N4 i6 }; X例1.表单触发或加载时，逐字输出字符串

<html>
9 b" W: ?$ P* @, t! p
<head>* L! }; \. x3 x: n2 I& V1 n# E# x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 F4 T+ h$ b( o0 t
<title>无标题文档</title>
! _* `6 I9 `9 H2 b0 G7 Z9 h7 x
<script language="JavaScript" type="text/javascript">
! O* h4 n4 O! n* t
var str = "这个是测试用的范例文字";) B4 f d0 A9 n( q
var seq = 0;: c" { v J( C* J% Q
var second=1000; //间隔时间1秒钟6 ~: |2 q" p/ Z, p( b# G
function scroll() {; ^ V. y7 Q" l# @9 B
msg = str.substring(0, seq+1);& _7 r% W' N5 n# ?# W1 J
document.getElementByIdx_x_x('word').innerHTML = msg;+ ~. X6 \8 `$ f" }4 \% }
seq++;% M, _# p) o1 O5 r6 _) U" p3 E, o
if (seq >= str.length) seq = 0;
! y# b3 t9 l( e9 `& N
}& v6 T' [% s! r, I& g4 u+ J t; X
</script>) n2 Q5 I& r& T4 ~* N3 ^
</head>% M, V$ Y M% G3 W, u3 p5 F
<body onload="setInterval('scroll()',second)">
. W, b2 Q. \8 p
<div id="word"></div><br/><br/>
* X. E/ D+ s+ Q5 v: A+ V
</body>! l( Z6 ^+ v+ j; u8 [
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 Y3 u2 F, |; `, z% L7 q
<html xmlns="http://www.w3.org/1999/xhtml">
3 R" [. i0 g) h! `! d
<head>6 X7 J! c$ M) s9 Q0 L
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />3 Z7 w4 |9 s0 q- d2 m5 r. k8 s
<title>无标题文档</title>& Z& a* m: M8 e) d; t7 ~' S1 Y# c
<script language="JavaScript" type="text/javascript">
9 ?4 A" {' Q) i5 p& C# V' ]
var second=5000; //间隔时间5秒钟 d2 B; z+ y/ c4 h) J- z! j9 C
var c=0;
& P( o, l V8 c& h" B
function scroll() {
- X& d1 h2 k& N; c( y/ r0 M
c++;3 J. ` f$ o4 Q: Q4 J
if ("b" == document.activeElement.id) {- Y5 |4 F" j3 }9 I8 j* m
var str="定时检查第<b> "+c+" </b>次<br/>";8 Y: K# k# h& ]. L
if(document.getElementByIdx_x_x('b').value!=""){5 P& Q9 _, J7 O( l
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";7 a9 B& T( \. {1 N$ X" S
}
5 {" |0 c* _2 D6 G3 D4 E/ t
document.getElementByIdx_x_x('word').innerHTML = str;0 L% { N! b9 Q \! v0 |7 X, r
}" s. N) A6 T. c7 k0 `! j' ?
}! Y8 r# s' Q! Q! ]2 a7 N
</script>1 A1 e/ ]/ ]) f \1 b
</head>
1 L* G) l- a; o5 l1 ]# s: ^( d$ U
<body>
& d# }5 S, C m' m0 b3 ~# o
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
4 ?: u: w" l q. I# r7 X* @! K3 u( T
<div id="word"></div><br/><br/>
. g Y# _$ O0 M+ g/ l5 U% x0 }
</body>2 Q; V/ e7 r6 E
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
! h* U& `/ {9 {& _- C: g
<head>
' q! Z+ \' b6 T8 b# b6 S
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
( J1 y8 k$ e/ B. m+ J2 Q/ H$ _
<script language="javascript">
( ?: D$ u6 U$ q
function count() {# k: b2 L* S9 U0 B) }3 }
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";- N1 X. o" U9 q2 g& s$ n7 |( _
setTimeout("alert('十秒钟到！')",10000)3 {" L. V2 m3 F
}
/ ~5 p) F0 ?$ `$ j( ]: B$ f( D5 @& o
</script>
- b: w$ J5 I, f) ]+ @7 N
<body> `+ a3 c2 Y2 G0 H
<div id="m"></div> k" u4 n2 d) B/ ]* G2 m! W; h
<input TYPE="button" value=" 计时开始" onclick="count()"># J. R5 i# }- \
</body>
+ u m) C5 l3 T- A8 |
</html>

复制代码

例4:倒计时定时跳转

<html>
% F" N4 ~7 b8 k0 |! P1 Z
<head>/ _4 b9 Q, V, ]
<base href="<%=basePath%>">! n3 Q* \3 i* U
<title>My JSP 'ds04.jsp' starting page</title>
# k; J* n8 }9 r& X5 A' j- R: d
<span id="tiao">3</span>
6 m- T# |! G4 h9 C# N' \) n
<a href="javascript:countDown"> </a>秒后自动跳转……# I% @& X9 ^$ q4 w. r" j( |/ v# R R
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>& f5 M- `1 \( U. V3 L
. s2 @$ X' [$ E6 g( W
<script language="javascript" type="">
* o" b0 n3 v9 e [7 U
function countDown(secs){
4 N6 |7 `3 m+ _2 Z
tiao.innerText=secs;
6 ?, w# M7 H& P/ ~
if(--secs>0)
2 O' M. S( w0 ]3 o6 p$ K
setTimeout("countDown("+secs+")",1000);
8 S& t8 m4 s* Y8 E. p
}7 _8 D9 h) M* P' o* J; O
countDown(3);
$ @; A! m3 Z4 |* T; N" L% f
</script>+ c" _* Q' e; w3 x; v
3 g$ {( W7 X b
</head>

复制代码

例6:

<head>
+ _5 r( I. b4 T0 M" }' R! Z' }
<meta http-equiv="refresh" content="2;url='b.html'"> . e8 [: b0 T5 v' E
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">( [2 A% ~ U4 n4 S
setTimeout("window.location.href='b.html'", 2000);9 F, D7 u* h G, \, r
//下面两个都可以用2 { \& l' r, m
//setTimeout("javascript:location.href='b.html'", 2000);
( @! @: Z: ]6 |7 u+ c
//setTimeout("window.location='b.html'", 2000);3 e& a* Y4 r- _ s0 n8 B1 f' R
</script>

复制代码

例8:

<span id="totalSecond">2</span>
1 i& F- Y# g* ^7 H
<script language="javascript" type="text/javascript">: a) f& i+ b" Z B5 x l
var second = document.getElementByIdx_x('totalSecond').innerHTML;
- w, B; B, i% ^
if(isNaN(second)){
# h6 ^* Y- e1 H8 g: q, T5 h
//……不是数字的处理方法1 ?$ W3 Y( f: i) k
}else{
9 C. J. y( m/ T2 |
setInterval(function(){/ _1 k+ {1 d/ r+ O
document.getElementByIdx_x('totalSecond').innerHTML = --second;
5 g% E+ C! m+ t& y
if (second <= 0) {8 Y+ D- M/ O& g3 b8 d
window.location = 'b.html';( ]: v3 _; i' R* _+ c
}, `1 o5 x4 R# r, X% e, U& y
}, 1000);
# c2 K. ^2 D3 t' O' W9 ]: ~ N
} ' T; U: g9 z% o* ~) D2 G
</script>

复制代码

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

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