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

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

1，只执行一次的定时器

<script>
/ `, h3 j9 W2 V
//定时器异步运行
7 D" N2 c# Y$ \: G
function hello(){ 9 y2 V, c: x6 J# y' y$ ^
alert("hello");
8 H1 @- v }* B. I/ k
}
j* n2 ]( n" R" z9 a2 J9 ^3 w
//使用方法名字执行方法
: q' v5 Z: ~& }, ^
var t1 = window.setTimeout(hello,1000);
( @8 e9 N3 k7 R" E! r- }/ o& ]( q
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 7 M* _1 o% @/ b7 C
window.clearTimeout(t1);//去掉定时器
& k% c% _7 W7 j6 G, G0 X4 j; c
</script>

复制代码

2，重复执行的定时器

<script>
3 F' z! D2 L- i0 P
function hello(){ 7 U' c' J) H' L; Q! `
alert("hello"); ' Y/ h1 z9 y% s7 e: n
} ! d& a, n, I; B! r$ K- J+ [
//重复执行某个方法 ' z+ j3 T: j5 {6 Q: v7 \5 d0 p: {' v
var t1 = window.setInterval(hello,1000);
5 P5 M4 }1 V1 W! \) @$ U1 `
var t2 = window.setInterval("hello()",3000); + a+ f# N: B1 F# `" f7 \
//去掉定时器的方法
+ x) k; o+ y# o" n
window.clearInterval(t1);
& I3 H$ K! L. x' x# S. I
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);1 @! h0 r# Z6 C, \
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成- \' Y9 y7 Y, x2 y/ Q; X& R( g) A
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
" ]3 O' Q. C4 P2 a2 F* t- ^ Z; g+ W　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
0 G9 \9 R# H# y" g' B; A比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，: _; w0 C! R" x: ]3 g. C8 s) o) z
则需要用到循环定时器“setInterval("function();",delaytime)” 。

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

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。, ?# Y6 m+ Z7 K/ p* p* B/ f' w' z9 n% {
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式. K+ \- T0 K4 l# v
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象1 Z+ Z+ I8 |* I6 c+ M" m
clearInterval(对象) 清除已设置的setInterval对象

略举两例。0 J/ _- T1 b; F) Z _4 U
例1.表单触发或加载时，逐字输出字符串

<html>6 M( n$ Q4 \8 Y( K1 P
<head>
+ Z) H& S( p6 F L: [% ~. H" M
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! E8 G# x4 Y# M. | V4 x
<title>无标题文档</title>7 B ^' |6 U( v( Q8 o
<script language="JavaScript" type="text/javascript">
; Y9 G2 G2 B0 t
var str = "这个是测试用的范例文字";
4 r) w( h0 v5 u
var seq = 0;# N+ f- ~0 D) g/ R& \/ W
var second=1000; //间隔时间1秒钟
* f C# t: ?/ B% ~) Q
function scroll() {
/ ^0 H/ g6 g: D2 e. G! C( z4 a6 T
msg = str.substring(0, seq+1);4 s/ ?4 d5 ?( Y6 p- C5 o
document.getElementByIdx_x_x('word').innerHTML = msg;
: N3 u* p6 K7 l
seq++;0 n+ M; w1 D0 B* }
if (seq >= str.length) seq = 0;6 x+ x* L, b+ H9 e
}5 |3 o# d! u4 r5 d: W3 R
</script>: V( w. O( a+ P( J. K( a9 V
</head>
0 X3 q q2 f0 s3 u
<body onload="setInterval('scroll()',second)">
0 d! G1 s/ D1 D' x9 w. k/ R
<div id="word"></div><br/><br/>' M+ f9 Z/ }0 ~+ {
</body>
4 D9 v' a/ B* J6 P3 ~) c! A0 W: v
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
^( r/ i, l) ^8 c2 C
<html xmlns="http://www.w3.org/1999/xhtml"> c9 Y" N& a( _
<head>
; O1 o# N! z5 b, F8 d
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
9 @; {2 w; y, W( y8 a( g* V
<title>无标题文档</title>& N! F& e& t$ e( `2 M
<script language="JavaScript" type="text/javascript">
$ V/ A0 v$ w+ {8 a" M$ Z, n N
var second=5000; //间隔时间5秒钟8 d( d; Z2 U7 ]# N# X8 Y' z
var c=0;/ R* q; {9 R+ o9 B$ F! F) F
function scroll() {
4 n! ?/ o. S& _6 N
c++;6 x; x/ E& @( P" l
if ("b" == document.activeElement.id) {, l5 k/ S) T$ g% ^/ y
var str="定时检查第<b> "+c+" </b>次<br/>";( G% V" H2 A$ n9 s+ K) w0 P
if(document.getElementByIdx_x_x('b').value!=""){
U0 Y. L" V+ R7 O* {
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
8 l! h7 A0 B* Z5 u9 J; v
}
/ }% A* Y4 w/ f' ` M3 |
document.getElementByIdx_x_x('word').innerHTML = str;
8 |2 @/ K- j! a3 r
}
& G8 G+ W1 I0 u: q0 i. F
}
/ p6 P& w) S* |( c
</script>
, d+ F8 B$ |9 K* r' j( b( q
</head>
: ]: @, c/ M: N* i( `
<body>+ f# x. v6 ]/ v( M- p
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>7 z$ f& a F- g! G! P2 y( R
<div id="word"></div><br/><br/>
( E c" ~* [" I _4 l- U: m
</body>7 _8 M. o% c+ J* c1 u2 \0 W1 Y
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
$ @4 v# i1 e0 R# W1 U' M
<head>2 {( f* }9 ^% Y6 e
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- O' X, J% C5 o0 J- H0 p
<script language="javascript">8 k7 D4 P3 S+ H8 k k) Y+ [
function count() {. |- n& a g. ]6 |! q# ~( h
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";( N: S0 J8 ]) g6 e' E
setTimeout("alert('十秒钟到！')",10000)3 P& G+ U6 n$ x$ Y- l3 X8 ]. u
}
$ Z# a/ H- Z* \/ |" H
</script>& f! I, l' G6 e. R: d; R4 L0 P* S
<body>: @8 g$ f" w* A! j) y5 N- d
<div id="m"></div>
; a: C# A' ^: T7 ?) F4 Q2 ?3 B
<input TYPE="button" value=" 计时开始" onclick="count()">
' k. [5 Y' _+ ~8 |
</body>( [5 Q8 ?( H* {
</html>

复制代码

例4:倒计时定时跳转

<html>
& k9 _; I% H$ c1 r0 X/ L
<head>) y6 {3 `5 h6 c/ I& ?! m4 ~
<base href="<%=basePath%>">
, C3 u$ X+ y: e& `
<title>My JSP 'ds04.jsp' starting page</title>
/ f+ L m1 r! ?0 {( i3 ^& e" Q
<span id="tiao">3</span>
! F6 Z- [. C9 Z: x3 R
<a href="javascript:countDown"> </a>秒后自动跳转……
/ u+ P X; j9 _$ J. x" w
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>; Y' d: x: F# e8 U; e4 L
0 h. `+ a$ B: u: X
<script language="javascript" type="">
3 M! e" m9 J8 W x2 ^
function countDown(secs){6 K, \% P) l- i
tiao.innerText=secs;( M/ i: u( P' F% ^
if(--secs>0), L3 r* r' m. A3 U) T6 u
setTimeout("countDown("+secs+")",1000);
* d0 \. g5 ^* `+ I
}1 p: F* j- ^, K" W& x* b- _
countDown(3);
5 h! P3 i6 ]/ f X0 s$ i$ u( B4 ^
</script>
: W, W' Z: P- g1 f$ |. R
$ j: ?* r- I- Z _/ B: E9 d5 H
</head>

复制代码

例6:

<head> . x; ]/ _; S% ^1 t# ?
<meta http-equiv="refresh" content="2;url='b.html'">
6 } m5 c& X4 K5 C
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
8 N- ~' W: a4 e
setTimeout("window.location.href='b.html'", 2000);
( V7 Y I0 }, J( y% P4 M, @
//下面两个都可以用8 F0 q" V, X1 V- S- {& T
//setTimeout("javascript:location.href='b.html'", 2000);
0 `) V8 D! E% V p& \9 y
//setTimeout("window.location='b.html'", 2000);
4 n+ f0 _2 r4 j0 e |3 e0 K
</script>

复制代码

例8:

<span id="totalSecond">2</span>
9 \5 [$ d* ~! H% q8 s9 `
<script language="javascript" type="text/javascript">
9 ?! h, o( _) I2 P
var second = document.getElementByIdx_x('totalSecond').innerHTML;
4 W" r+ \8 u" J, I
if(isNaN(second)){
$ W7 v: U* T3 ]- e. f6 t
//……不是数字的处理方法
3 |: ~5 ]* Y, b, ~; q9 G
}else{
4 h6 o/ _7 |* z; _; [- U' a0 y
setInterval(function(){
( h |) c, r4 l! ?7 V4 C
document.getElementByIdx_x('totalSecond').innerHTML = --second;8 l% q$ T8 z, Z' H
if (second <= 0) {
3 z3 o9 b& T. F' R! E& U
window.location = 'b.html';
) p5 {/ k% ], X! o$ P; u
}; D7 I8 r# V5 i" `
}, 1000);
# ~5 O4 M- Q7 L( r3 M6 u
}
: n2 w# Z; p% V
</script>

复制代码

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

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

浏览过的版块